ReactJS - 状态管理 API

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

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

setState API 的签名如下 −

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

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

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

setState() with Function

setState with function 的签名如下 −

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 
})

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

React State API 的特殊功能

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

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

{
    name: 'John', age: 16
}

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

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