在 React 中，为什么使用 useState 的状态更新函数时，有时需要传入一个函数而不是直接传入新值？

在 React 中，为什么使用 useState 的状态更新函数时，有时需要传入一个函数而不是直接传入新值？

回答与解析：

在 React 的 useState Hook 中，状态更新有两种写法：

1. 直接传入新值：

   setCount(count + 1);
   

2. 传入一个更新函数（函数式更新）：

   setCount(prevCount => prevCount + 1);
   

当状态更新依赖于当前状态的旧值时，推荐使用函数式更新（即传入一个函数）。原因如下：

• React 的状态更新可能是异步的，并且在某些情况下（如快速连续点击或批量更新），React 会将多个状态更新进行批处理（batching）。
• 如果直接使用当前状态变量（如 count）进行计算，可能会读取到过时的闭包值（stale closure），导致更新基于旧状态进行，从而产生错误结果。
• 而传入一个函数时，React 会将最新的状态值作为参数传递给该函数，确保你总是基于最新状态进行计算。

示例对比：

// ❌ 错误：在快速点击时可能多次使用同一个旧 count 值
const handleClick = () => {
  setCount(count + 1);
  setCount(count + 1); // 两次都基于同一个 count 值
};

// ✅ 正确：每次都会基于最新状态更新
const handleClick = () => {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1); // 第二次会基于第一次更新后的值
};

因此，当新状态依赖于前一个状态时，应使用函数式更新以确保正确性和一致性。