React 异步渲染机制

黄毛火烧雪下2024-11-01 17:29

react 官网渲染讲解：

https://zh-hans.react.dev/learn/render-and-commit

1. 异步状态更新

React 将状态更新标记为需要更新，但并不会立即执行。这是为了优化性能，通过批量处理状态更新和减少渲染次数来提升应用的响应速度。

2. 更新队列

当你调用 setVisible 时，React 并不会立刻更新状态并重新渲染组件。相反，React 会将状态更新放入一个队列中，并在下一个事件循环（即下一次渲染周期）中处理这些更新。

3. 影响的渲染

这意味着，在调用 setVisible 后，当前组件的渲染仍然会使用旧的状态值。在你下一次访问状态时（例如在 console.log 中或直接在组件中使用），它会反映最新的状态值，但在当前渲染周期中仍然是旧值。

csharp 复制代码

const [visible, setVisible] = useState(false);

const toggleVisibility = () => {
  setVisible(!visible); // 此时更新状态，但 visible 仍然是旧值
  console.log(visible); // 这里会输出旧值
};

4.解决方法

如果你需要在状态变化后立即执行某些操作，建议使用 useEffect 监控状态：

csharp 复制代码

useEffect(() => {
  console.log('Visible has changed:', visible); // 这里会输出更新后的值
}, [visible]);