【图】React源码解析-第一部分：宏观架构

在前端开发内容学习中，【图】React源码解析-第一部分：宏观架构是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

React 完整宏观工作流（从触发到屏幕）

React完整工作流主要分为三个阶段。

1. 调度器（Scheduler）  负责按紧急程度排队任务；
2. 渲染阶段在内存中计算虚拟 DOM 差异，由于不操作真实 DOM，可以被高优任务打断；
3. 提交阶段则必须一次性同步完成 DOM 更新，以保证屏幕渲染的一致性。

Diff 算法三大核心策略

React 的 Diff 不是图论上的最优 O(n³) 算法，而是基于两个启发式假设的 O(n) 算法：

• 同层比较（跨层级直接重建）；
• 不同类型元素产生不同树（直接销毁重建）。

对列表，稳定且唯一的 key 是性能的关键，它能帮助 React 跳过大量不必要的 DOM 操作，直接复用节点。

Fiber 双缓冲机制（Current树和WorkInProgress树）

双缓冲是 React 实现“异步可中断渲染”的底层数据结构保障。 内存中始终维护两棵 Fiber 树：

1. current 反映当前屏幕状态，
2. workInProgress 是后台正在构建的下一帧。

当后台树全部计算完毕，只需一次指针切换（alternate 指针）即可完成更新。这种机制让 React 能随时丢弃未完成的后台工作，保证了 UI 的丝滑响应。