React 完整宏观工作流(从触发到屏幕)
React完整工作流主要分为三个阶段。
- 调度器(Scheduler) 负责按紧急程度排队任务;
- 渲染阶段在内存中计算虚拟 DOM 差异,由于不操作真实 DOM,可以被高优任务打断;
- 提交阶段则必须一次性同步完成 DOM 更新,以保证屏幕渲染的一致性。
Diff 算法三大核心策略
React 的 Diff 不是图论上的最优 O(n³) 算法,而是基于两个启发式假设的 O(n) 算法:
- 同层比较(跨层级直接重建);
- 不同类型元素产生不同树(直接销毁重建)。
对于列表,稳定且唯一的 key 是性能的关键,它能帮助 React 跳过大量不必要的 DOM 操作,直接复用节点。
Fiber 双缓冲机制(Current树和WorkInProgress树)
双缓冲是 React 实现“异步可中断渲染”的底层数据结构保障。 内存中始终维护两棵 Fiber 树:
current反映当前屏幕状态,workInProgress是后台正在构建的下一帧。
当后台树全部计算完毕,只需一次指针切换(alternate 指针)即可完成更新。这种机制让 React 能随时丢弃未完成的后台工作,保证了 UI 的丝滑响应。