【React】setState 触发渲染的流程

张开发
• 2026/4/6 21:52:27 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

【React】setState 触发渲染的流程
概述setState 本质是向React Fiber 树中加入一个更新update触发调度schedule在协调阶段reconciliation通过 diff 算法计算变更最终在提交阶段commit更新 DOM。setState ↓ 创建 update 对象 ↓ 加入 Fiber updateQueue ↓ 调度更新schedule ↓ render 阶段diff ↓ commit 阶段更新 DOM详细流程创建 updateconstupdate{payload:newState,lane:priority};加入更新队列fiber.updateQueue.enqueue(update);调度更新scheduleUpdateOnFiber(fiber);React 18 使用 Lane 模型来管理优先级替代 expirationTime为什么 setState 会导致组件重新执行因为Fiber 标记为“需要更新”React 会重新执行函数组件或 class renderfunctionApp(){// setState 后这个函数会重新执行}rerender 是“函数重新执行”不是 DOM 直接更新React diff 是基于“同层 key 类型”的算法render vs commitrender 阶段可中断执行函数组件生成新的虚拟 DOM计算 diff协调算法 reconciliation构建 Fiber 树commit 阶段不可中断更新 DOM执行副作用useEffectcommit 是同步执行的保证 UI 一致性

更多文章