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

165 阅读1分钟

React源码解析 宏观架构.png

React 完整宏观工作流(从触发到屏幕)

mermaid-diagram-2026-07-29-111749.png React完整工作流主要分为三个阶段。

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

Diff 算法三大核心策略

deepseek_mermaid_20260706_fdebe1.png

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

  • 同层比较(跨层级直接重建);
  • 不同类型元素产生不同树(直接销毁重建)。

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

Fiber 双缓冲机制(Current树和WorkInProgress树)

deepseek_mermaid_20260706_50f552.png

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

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

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