React 是当下最流行的前端库之一，它提供了许多方便的特性，包括可以在组件内部管理状态，使用 render() 函数可实现声明式 UI，等等。在 React 中，我们经常使用 setState() 方法来管理组件中的状态，但是，这个方法需要谨慎使用。在本文中，我们将会详细讨论 setState() 的使用方法和注意事项，以及如何避免常见的错误。
setState() 方法
在 React 组件中，如果要更新状态，通常使用 setState() 方法。这个方法接受一个对象或者一个函数作为参数，用于更新组件的状态。基本语法如下：
this.setState({ key: value });或者：
this.setState((prevState, props) => {
return { key: prevState.key + props.increment };
});可以看出，第一种方法是用一个对象来更新状态，而第二种方式则是使用一个函数，函数接受两个参数，第一个参数是当前状态的值，第二个参数是组件的 props（如果有的话），这个函数需要返回一个新的状态对象。
setState() 注意事项
尽管 setState() 看起来很简单，但是这个方法需要注意一些细节。以下是我们需要注意的事情：
setState() 是异步的
React 会将多个 setState() 调用合并成一个调用，从而提高性能。因此，我们不能保证 setState() 会立即执行，其实是异步的。所以，当我们在 setState() 调用之后立即读取状态时，可能会得到原来的状态值。
this.setState({ counter: this.state.counter + props.increment });
console.log(this.state.counter); // 不一定是更新后的值解决这个问题的方法是在 setState() 方法中传入一个回调函数，在回调函数中执行需要依赖新状态的逻辑。
this.setState({ counter: this.state.counter + props.increment }, () => {
console.log(this.state.counter); // 确保是更新后的值
});setState() 不可变性
由于 React 并不会原地修改对象，而是创建一个新的对象来代替原来的对象，因此，我们必须要遵循不可变性的原则。
// 错误的做法
this.state.list.push(newItem);
this.setState({ list: this.state.list });// 正确的做法
this.setState((state) => ({ list: [...state.list, newItem] }));在上面的错误示例中，我们在数组上直接调用 push() 方法来添加一个新元素，这个操作破坏了数组的不可变性，就算它可以实现增加元素的效果，但是 React 并不能感知到这个变化。而在正确示例中，我们使用了 ... 展开运算符来复制了一份原数组，然后将 newItem 添加到了新的数组中，使得原数组保持不可变，而 setState() 方法也能正确的感知到新的数组。这个原则同样适用于对象的更新。
setState() 引起的循环渲染
如果我们在更新状态中使用了 props 的值来计算状态，可能会发生循环渲染的情况。例如：
this.setState({ counter: this.state.counter + this.props.increment });如果这个组件的父组件每次重新渲染时都传入了新的 increment 值，那么就会导致子组件不断地更新自己的状态，从而引起不必要的性能消耗。
为了避免这个问题，我们应该把 props 传入 setState() 方法中的回调函数中计算新状态。
this.setState((state, props) => ({ counter: state.counter + props.increment }));总结
本文介绍了在 React 中使用 setState() 方法时需要遵守的注意事项。我们需要保证对状态的更新操作是不可变的，同时还需要注意异步执行和循环渲染的问题。通过遵循这些规则，我们可以更好的使用 setState() 方法，使得我们的代码更加健壮和效率更高。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
-------- -------------- -
----- ------- --------- - ------------------
------ -
-----
--------- -----------
------- ----------- -- -------------- - ----------------------------
------
--
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64de8003f6b2d6eab39b67e6