在 React 中，为什么 useState 的更新有时看起来是“异步”的，无法立即获取到最新状态？

在 React 中，为什么 useState 的更新有时看起来是“异步”的，无法立即获取到最新状态？

回答与解析：

React 中 useState 的状态更新看起来“异步”，本质上是因为 React 的状态更新是批量处理（batched）和调度的，并不会立即改变 state 的值，而是安排一次重新渲染（re-render）。在事件处理函数或生命周期中调用 setState 后，当前执行上下文中读取的 state 值仍然是更新前的旧值。

例如：

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1);
  console.log(count); // 依然输出旧值
};

这是因为 useState 的更新是通过 React 的调度机制触发的，React 会将状态变更收集起来，等到合适的时机（通常是事件处理函数执行完毕后）再触发组件重新渲染。所以在 setCount 调用后的同步代码中，count 还没有更新。

解决方法：

1. 如果需要基于最新状态进行计算，可以使用函数式更新：

setCount(prevCount => {
  const newCount = prevCount + 1;
  console.log(newCount); // 可以立即使用新值
  return newCount;
});

2. 如果需要在状态更新后执行某些逻辑，应使用 useEffect：

useEffect(() => {
  console.log('count updated:', count);
}, [count]);

补充说明：

在 React 18 之后，即使在非 React 事件（如 setTimeout、Promise 回调）中，React 默认也会进行自动批处理（automatic batching），进一步增强了性能，但也可能让开发者更难察觉状态“未立即更新”的行为。因此，始终假设状态更新是非同步的，是符合 React 设计理念的正确做法。