在 React 中，为什么使用 useState 更新状态后，立即读取该状态的值仍然是旧值？

在 React 中，为什么使用 useState 更新状态后，立即读取该状态的值仍然是旧值？

回答与解析：

这是因为 React 的状态更新是异步的，并且 useState 返回的 setState 函数并不会立即修改状态变量的值。当你调用 setState（例如 setCount(count + 1)）时，React 会将该更新安排到下一个渲染周期中，而当前函数作用域中使用的状态变量仍引用的是更新前的值。

例如：

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

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

在 handleClick 中，虽然调用了 setCount，但 count 变量在本次函数执行中不会改变。只有在下一次组件重新渲染时，count 才会变成新值。

解决方案：

• 如果你需要基于最新状态进行计算，可以使用函数式更新（setCount(prev => prev + 1)）。
• 若需在状态更新后执行某些逻辑，应使用 useEffect 监听状态变化：

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

这种设计有助于 React 批量处理状态更新、优化性能，并确保状态的一致性。