React 异步渲染机制
react 官网渲染讲解:
https://zh-hans.react.dev/learn/render-and-commit
1. 异步状态更新
React 将状态更新标记为需要更新,但并不会立即执行。这是为了优化性能,通过批量处理状态更新和减少渲染次数来提升应用的响应速度。
2. 更新队列
当你调用 setVisible 时,React 并不会立刻更新状态并重新渲染组件。相反,React 会将状态更新放入一个队列中,并在下一个事件循环(即下一次渲染周期)中处理这些更新。
3. 影响的渲染
这意味着,在调用 setVisible 后,当前组件的渲染仍然会使用旧的状态值。在你下一次访问状态时(例如在 console.log 中或直接在组件中使用),它会反映最新的状态值,但在当前渲染周期中仍然是旧值。
const [visible, setVisible] = useState(false);
const toggleVisibility = () => {
setVisible(!visible); // 此时更新状态,但 visible 仍然是旧值
console.log(visible); // 这里会输出旧值
};
4.解决方法
如果你需要在状态变化后立即执行某些操作,建议使用 useEffect 监控状态:
useEffect(() => {
console.log('Visible has changed:', visible); // 这里会输出更新后的值
}, [visible]);