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]);