【图】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 的丝滑响应。