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