React 源码该从哪里开始看？先别急着啃 Fiber（工业级避坑指南）

364人浏览 · 2026-04-15 09:11:12

· 2026-04-15 09:11:12 发布

一、为什么 90% 的人看 React 源码会失败？

先说结论：不是 React 源码难，而是你的“坐标系”错了。

大多数人的路径是： clone 仓库 → 全局搜 Fiber → 看不懂 flags/lanes/alternate → 陷入局部逻辑死循环 → 怀疑人生 → 放弃

问题在于：React 不是一堆工具函数的集合，它是一个完整的运行时系统（UI Runtime）。

如果你没有建立整体模型，直接看 Fiber，就像在没看地图的情况下研究地上的砖头。你会产生无数疑问：

为什么一个 Fiber 节点有 40 多个属性？
为什么代码里全是 while 循环而不是直观的递归？
为什么明明数据变了，页面却没立刻更新？

本质原因只有一个：你没有建立 React 的运行模型。

二、 React 的本质：它是一个 UI 渲染操作系统

很多人把 React 当成 UI 框架，其实从源码角度看，它更像是一个“UI 异步调度操作系统”。

它核心只做三件事，但每一步都大有乾坤：

描述 UI（ReactElement）：你是谁？（JSX 的静态解析）
计算变化（Reconciler）：你变了没？（Diff 算法与 Fiber 树构建）
执行更新（Renderer）：去改 DOM。（跨平台渲染）

这三步之间，靠的是一个调度员（Scheduler）在指挥：现在 CPU 忙不忙？用户有没有在打字？如果忙，渲染任务就先往后稍稍。

三、必须建立的 5 个核心模型（通向源码的地图）

这是你能不能看懂源码的关键，建议背下来再看代码。

1. ReactElement：静态说明书

当你写下 <div>Hello</div>，React 拿到的是：

{
  $$typeof: Symbol(react.element),
  type: 'div',
  props: { children: 'Hello' },
  key: null,
  ref: null
}

工业级理解：它是不可变（Immutable）的。每次 Render，React 都会生成一堆全新的 Element，这本身不卡，卡的是后面把 Element 转换成真实 DOM 的过程。

2. Fiber：带权的执行单元

React 不直接执行 Element，而是将其转换成 Fiber。 Fiber 是 React 的灵魂。 它是一个增强版的节点，承担了三个角色：

静态结构：它是链表节点，通过 child、sibling、return 构成树。
状态容器：它是 Hook 和 State 真正寄存的地方。
并发单元：它是可中断的任务单位。

3. Lane 模型：精密优先级控制

React 18 彻底放弃了旧的 ExpirationTime，改用 Lane（车道模型）。

逻辑：它利用 31 位二进制位来表示优先级。
为什么？：位运算快到极致。通过位掩码（Bitmask），React 可以瞬间判断出：“这个紧急更新是否包含在当前的渲染批次里？”。

4. 双缓存（Double Buffering）

React 永远维护两棵树：

current：屏幕上正在显示的。
workInProgress (WIP)：内存里正在构建的。
关键点：所有的计算都在 WIP 树上做。一旦算完，只需改一下指针，WIP 变 current，瞬间完成更新。

5. Effect & Flags

在遍历 Fiber 树时，如果发现节点有变化，React 不会立刻改 DOM，而是给这个 Fiber 贴个“标签”（Flags），比如 Placement（新增）、Update（修改）。

四、 React 的执行链路：深度拆解

记住这个完整流程，断点调试时你才知道自己在哪个阶段：

触发更新：调用 setState。
创建 Update：把这次更新包装成对象，计算优先级（Lane）。
调度任务：Scheduler 收到请求，在浏览器的 MessageChannel 宏任务里排队。
render 阶段（深度优先遍历）：
- beginWork：向下走。对比新旧 Element，创建/复用 Fiber，打上 Flags。
- completeWork：向上走。收集 Flags，创建 DOM 实例，构建 DOM 树。
commit 阶段：
- BeforeMutation：处理类组件生命周期。
- Mutation：真正动 DOM。
- Layout：处理 useLayoutEffect。

五、源码目录避坑指南：只看这几个包

React 是 Monorepo 架构，核心代码全在 packages/ 下：

1. `react` (核心库)

看 ReactElement.js 和 ReactHooks.js。搞清楚 createElement 怎么封装数据，以及 Hooks 的“表面接口”是怎么定义的。

2. `react-reconciler` (最硬的核心)

这是 React 的心脏，占了 80% 的理解难度。

重点看 ReactFiberBeginWork.new.js 和 ReactFiberCompleteWork.new.js。
你会看到 React 是如何处理不同类型的组件（Function, Class, HostComponent）。

3. `scheduler` (独立调度器)

React 团队甚至想把它单独卖给其他框架用。

重点看它是如何模拟 requestIdleCallback 的，以及它如何处理任务过期。

六、进阶：为什么 Fiber 必须是链表？

React 15 以前是递归渲染。递归就像下楼梯，一旦开始，不到底部停不下来。

后果：如果你有 3000 个节点，主线程卡住 200ms 做 Diff，用户的输入（Input）就没响应，这就是“掉帧”。

Fiber 的方案：把递归改成循环（while）。

while (workInProgress !== null) {
  performUnitOfWork(workInProgress);
}

利用链表指针：

即便渲染到一半，如果高优先级的用户输入来了，React 可以直接抛弃当前的 WIP 树。
或者保存当前指针，等主线程空闲了再恢复执行。这就是所谓的“增量渲染”。

七、 Hooks 的底层真相

不要一上来就学 Hooks 源码！ 你要先理解 Fiber 的 memoizedState。

每个 Hook 对象都有自己的 memoizedState。
它们通过 next 指针串成一个单向链表。
这就是为什么 Hooks 不能写在 if 里的底层原因：React 靠顺序来匹配状态，一旦顺序乱了，整个状态树就崩了。

八、总结：你的源码学习建议

不要试图看懂每一行代码：React 源码里充满了为了性能极致优化的 if-else 和位运算，这些是细节，不是主干。
先走通主流程：写一个最简单的 Counter 组件，断点打在 beginWork，观察它是如何递归组件的。
理解思想比背 API 重要：
- 代数效应（Algebraic Effects）：Hooks 的理论基础。
- 并发性（Concurrency）：React 18 的核心命题。
- 声明式驱动：数据 -> Fiber -> UI。