ReactJS - 状态管理 API

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

setState() 用于更新组件的状态对象。这是通过调度对该组件状态对象的更新来完成的。因此，当状态改变时，此组件会通过重新渲染来响应。

setState API 的签名如下：

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

一个设置/更新名称的简单示例如下：

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

使用函数的 setState()

使用函数的 setState API 的签名如下：

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

这里：

• state 指的是 React 组件的当前状态

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

React 建议使用函数形式的 setState API，因为它在异步环境中可以正确工作。除了 lambda 函数，也可以使用普通的 JavaScript 函数。

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

示例

一个使用函数更新金额的简单示例如下：

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

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

React 状态 API 的特殊特性

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

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

{ 
   name: 'John', age: 16 
}

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

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