React中使用spread运算符时是否无需依赖prevState？

我正在学习React，有一个疑问：当我们需要设置新状态时，有时会使用prevState（前一个状态），比如下面的计数器示例：

import React, { useState } from "react";

function HookCounter() {
  const initialCount = 0;
  const [count, setCount] = useState(initialCount);
  return (
    <div>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount((prevState) => prevState + 1)}>
        Increment
      </button>
      <button onClick={() => setCount((prevState) => prevState - 1)}>
        Decrement
      </button>
    </div>
  );
}

export default HookCounter;

这是因为我们需要基于前一个状态构建新状态。那这是否意味着，如果使用展开运算符（例如操作数组或对象），就不需要使用prevState了？因为展开运算符似乎已经获取了前一个状态，比如下面的数组示例：

import React, { useState } from "react";

function ArrayCounter() {
  const [items, setItems] = useState([]);

  const addItem = () => {
    setItems([
      ...items,
      {
        id: items.length,
        value: Math.floor(Math.random() * 10) + 1,
      },
    ]);
  };
  return (
    <div>
      <button onClick={addItem}>Add a number</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.value}</li>
        ))}
      </ul>
    </div>
  );
}

export default ArrayCounter;

其实不是的，使用展开运算符和是否需要prevState没有必然的替代关系，核心看状态更新是否依赖于最新的前状态，以及是否存在批量更新的场景：

• 当你的状态更新是同步的、单次的，比如示例里的addItem，直接用...items看起来没问题，但如果遇到多次连续更新（比如同一个事件里多次调用setItems），或者状态更新是异步触发的（比如在定时器、API回调里），直接引用当前的items可能会拿到旧的状态值——因为React的状态更新是异步批量处理的，此时当前的items还是更新前的快照。

• 而使用prevState的函数式更新（setItems(prev => [...prev, newItem])），React会保证每次更新都拿到最新的前状态，不管是同步还是异步的批量更新场景，都能确保状态的正确性。

举个反例，如果修改addItem为连续添加两个元素：

const addItem = () => {
  // 直接用items的话，两次更新都会基于同一个旧的items数组，最终只会添加一个元素
  setItems([...items, {id: items.length, value: 1}]);
  setItems([...items, {id: items.length, value: 2}]);
};

换成函数式更新就不会有这个问题：

const addItem = () => {
  setItems(prev => [...prev, {id: prev.length, value: 1}]);
  setItems(prev => [...prev, {id: prev.length, value: 2}]);
};

总结 #

• 展开运算符只是用来复制旧状态的内容、构建新的数组/对象，但它无法保证拿到的是最新的前状态。
• 当状态更新依赖于前状态，且存在异步更新或批量更新的可能时，必须使用prevState的函数式更新来确保正确性；如果是简单的单次同步更新，两种写法都能工作，但函数式更新是更稳妥的通用方式。

内容的提问来源于stack exchange，提问作者josegp