为什么 useState 多次更新不生效？

问题

在编写 React 代码时，如果你希望多次更新状态，可能会尝试使用 handleClickWrong 中的方式。然而，你会发现实际效果并不如预期：count 只增加了 1，而不是 3。

const root = document.getElementById('root');

const App = () => {
  return (
    <div>
      <h1>Hello World</h1>
      <Counter />
    </div>
  );
};

const Counter = () => {
  const [count, setCount] = React.useState(0);

  const handleClickWrong = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={handleClickWrong}>Increment</button>
    </div>
  );
};

const rootElement = ReactDOM.createRoot(root);
rootElement.render(<App />);

为什么会出现这种情况呢？要弄清楚这个问题，我们需要了解 React 如何处理状态更新的细节。

React 内部状态更新机制

React 使用了一个内部机制来处理状态更新。我们可以通过以下源码片段了解这背后的实现：

// React 源码中的基本状态处理器
function basicStateReducer(state, action) {
  // $FlowFixMe: Flow doesn't like mixed types
  return typeof action === 'function' ? action(state) : action;
}

在我们使用 handleClickWrong 的情况下，React 会按照以下方式处理状态更新：

// 假设初始状态为 0，我们传递的值是 1
newState = basicStateReducer(0, 1);

由于 basicStateReducer 接收到的 action 不是函数，它会直接返回这个值作为最新状态。因此，newState 会被更新为 1。

回到 handleClickWrong 的例子：

const handleClickWrong = () => {
  setCount(count + 1); // = basicStateReducer(0, 1) => 1
  setCount(count + 1); // = basicStateReducer(0, 1) => 1
  setCount(count + 1); // = basicStateReducer(0, 1) => 1
};

由于 count 在当前 Counter 函数的作用域内，三次 setCount 调用的值都是 count + 1。因此，即使调用了多次 setCount，由于 React 只处理了最新的 count 值，结果每次都将状态更新为 1。最终渲染时，count 依然只有 1。

解决方案

了解了原因后，我们可以改用函数形式的更新来解决这个问题。注意到 basicStateReducer 会检查传入的 action，如果是函数，React 会用当前内部存储的状态作为参数传给这个函数。这样，我们可以基于最新的状态进行更新。

const handleClick = () => {
  setCount((prevCount) => prevCount + 1); // = basicStateReducer(0, (prevCount) => prevCount + 1) => 0 + 1 => 1
  setCount((prevCount) => prevCount + 1); // = basicStateReducer(1, (prevCount) => prevCount + 1) => 1 + 1 => 2
  setCount((prevCount) => prevCount + 1); // = basicStateReducer(2, (prevCount) => prevCount + 1) => 2 + 1 => 3
};

通过使用函数形式的更新，我们可以确保每次状态更新都基于前一个状态，从而实现预期的结果。