React 源码阅读

约 625 字大约 2 分钟

reactsource-code

2026年04月08日

React 源码不适合从头线性阅读。正确方法是先建立模块地图，再沿一个问题往下追。

阅读源码前先回答的问题

React 如何描述 UI？
更新任务如何入队？
React 如何决定哪些节点复用？
DOM 是在哪个阶段真正更新的？
Hooks 的状态存在哪里？

React 15 与 React 16+ 的分水岭

知识架构里把 React 15 和 React 16 分开是对的，因为它们代表两代核心思路：

React 15：Stack Reconciler，整体同步递归更新
React 16+：Fiber Reconciler，可中断、可恢复、可调度

如果你读的是历史文章，先分清它讲的是哪一代架构。

阅读现代 React 源码时优先关注的模块

react：对外 API
react-dom：DOM 渲染器
scheduler：任务调度
react-reconciler：协调核心

重点不是把每个文件看完，而是沿问题追入口。

推荐阅读路径

1. JSX 最终去了哪里

从组件返回的 JSX 出发，理解元素对象长什么样、怎样进入 reconciler。

2. 一次状态更新怎么流转

从 setState 或 dispatchSetState 出发，追：

创建 update
入队
调度
render 阶段计算
commit 阶段提交

3. Fiber 节点长什么样

理解 Fiber 上的几个关键概念：

当前节点与工作节点
父子兄弟关系
flags / lanes 一类调度与副作用标记

4. Hooks 如何关联状态

函数组件没有实例对象，Hooks 仍能记住状态，是因为 React 在渲染期间按调用顺序维护 Hook 链表或槽位结构。

读源码时常见误区

一上来就读最底层工具函数
不区分历史版本，混读文章
把每个实现细节都当成“必须背会”
没有问题驱动，只是从上到下硬看

建议的源码切题方式

围绕这些问题读，效率最高：

setState 为什么要用函数式更新？
key 为什么能影响复用？
Fiber 为什么能支持并发能力？
useEffect 为什么在某些时机会重复执行？
Suspense 为什么可以挂起渲染？

实践建议

先读一遍总体架构，再挑一个链路深挖
用断点辅助，不要只靠静态阅读
把“历史演进”当成理解源码的重要线索
先搞懂更新主链路，再看优化和边界分支