React 异步渲染机制

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]);
相关推荐
Asort14 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney33 分钟前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥35 分钟前
前端必学的 CSS Grid 布局体系
前端·css
EMT35 分钟前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
ccnocare36 分钟前
选择文件夹路径
前端
艾小码36 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月37 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁41 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅41 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript