在 React 中，为什么使用 useState 设置状态时，有时需要传递函数形式（例如 setCount(prev => prev + 1)）而不是直接传递新值？

在 React 中，为什么使用 useState 设置状态时，有时需要传递函数形式（例如 setCount(prev => prev + 1)）而不是直接传递新值？

回答与解析：

在 React 的 useState Hook 中，set 函数可以接受一个新值或一个更新函数。当你需要根据前一个状态计算新状态时（如计数器加一、数组追加等），应使用函数式更新形式：setCount(prev => prev + 1)。

这是因为 React 的状态更新可能是异步的，并且在某些情况下（如事件处理函数中快速多次调用 setState），React 可能会对多个状态更新进行批处理。如果直接使用当前状态变量（如 count）来计算新值，可能会引用到“过期”的闭包值，导致状态更新不准确。

例如：

// 错误方式：可能丢失更新
const handleClick = () => {
  setCount(count + 1);
  setCount(count + 1); // 两次都基于同一个旧值，最终只加 1
};

// 正确方式：使用函数式更新
const handleClick = () => {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1); // 每次都基于最新的 prev，最终加 2
};

函数式更新确保你总是基于最新状态进行计算，避免因闭包捕获旧状态而导致的 bug。这在高频更新或并发模式（Concurrent Mode）下尤为重要。