ReactJS - 状态管理 API

正如我们之前所了解到的，React 组件通过组件的 this.state 来维护和暴露其状态。React 提供了一个单一的 API 来维护组件中的状态。API 是 this.setState（）。它接受 JavaScript 对象或返回 JavaScript 对象的函数。

setState（） 用于更新组件的状态对象。这是通过计划对该组件的状态对象进行更新来完成的。因此，当状态发生变化时，此组件会通过重新渲染来响应。

setState API的签名如下：

 this.setState( { ... object ...} );

设置/更新名称的简单示例如下 -

 this.setState( { name: 'John' } )

setState（） 与函数

带有函数的 setState 的签名如下 -

this.setState( (state, props) =>	
	 	... function returning JavaScript object ... );

这里

• state 是指 React 组件的当前状态
• props 指的是 React 组件的当前属性。

React 建议使用带有函数的 setState API，因为它在异步环境中正常工作。也可以使用普通的 JavaScript 函数来代替 lambda 函数。

this.setState( function(state, props) {	
	 	return ... JavaScript object ...	
}

例

使用函数更新金额的简单示例如下 -

this.setState( (state, props) => ({	
	 	amount: this.state.amount + this.props.additionaAmount	
})

不应直接通过 this.state 成员变量修改 React 状态，通过成员变量更新状态不会重新渲染组件。

React State API的特殊功能

React 状态 API 的一个特殊功能是它将与现有状态合并，而不是替换状态。例如，我们可以一次更新任何一个状态字段，而不是更新整个对象。此功能使开发人员能够灵活地轻松处理状态数据。

例如，让我们考虑内部状态包含学生记录。

{	
	 	name: 'John', age: 16	
}

我们只能使用 setState API 更新年龄，该 API 会自动将新对象与现有的学生记录对象合并。

this.setState( (state, props) => ({	
	 	age: 18	
});