Appearance
前言
写作动机
深夜十一点。会议室里只剩下我和一块白板。
白板上画满了箭头和方框——useMemo、useCallback、React.memo、useRef 保存回调——那是我们团队花了整整一周才理清的性能优化方案。一个看似简单的列表页面，因为嵌套组件的重渲染问题，在低端手机上卡到不可用。我们尝试了所有"最佳实践"：拆分组件、包裹 memo、缓存计算结果、用 useCallback 稳定回调引用。代码从 80 行膨胀到 240 行，其中超过一半是"优化代码"而非业务逻辑。
最终修复了吗？修复了。但我盯着那块白板，心里只有一个问题：
我们到底在优化 React，还是在跟 React 的心智模型搏斗？
两年后的今天，React 19 正式发布，React Compiler 进入生产可用阶段。那块白板上的所有优化代码——useMemo、useCallback、手动 memo——统统可以删掉。编译器会自动完成这一切。不是"大部分情况下"，而是"在语义正确的代码中，100% 自动完成"。
那一刻我意识到：React 正在经历它诞生以来最深刻的范式转变。 不是换了个 API，不是加了个新 Hook，而是整个心智模型的重构——从"开发者负责告诉 React 什么不需要重新计算"到"开发者只需写出正确的代码，React 自己决定什么需要重新计算"。
这种变化的深度，要求我们重新理解 React。不是从 API 文档出发，而是从源码出发，从设计哲学出发。
这就是这本书的起点。
为什么在 2026 年写一本 React 源码书
你可能会问：React 源码的书还少吗？
不少。但 2026 年的 React，和 2022 年的 React 已经不是同一个物种。
2022 年你读 React 源码，核心关注点是 Fiber 架构、并发渲染、Scheduler 优先级调度——这些仍然重要，它们是 React 的骨架。但 2026 年的 React 19 + Compiler 时代，游戏规则变了：
- React Compiler 将性能优化从运行时搬到了编译时，彻底改变了"什么代码需要优化"的答案
- Server Components 重新定义了"组件在哪里执行"的边界，模糊了前后端的分界线
- Actions 让表单和数据变更成为框架的第一公民，而不是用户自己用
useEffect+useState手搓的副作用链
这三个变化中的任何一个，都足以让你重新审视已有的 React 心智模型。三个叠加在一起，意味着一次认知重建。
理解 React 18 的 Fiber 架构是地基。理解 React 19 的编译时优化是上层建筑。没有地基的上层建筑是空中楼阁，没有上层建筑的地基是一片废墟。
这本书两者都覆盖。从 Fiber 的第一个节点，到 Compiler 的最后一个优化 pass。
React 19 + Compiler 时代意味着什么
让我用一个类比来说明这次范式转变的深度。
想象你在开一辆手动挡汽车。你需要时刻关注转速表，在正确的时机换挡，下坡时用发动机制动，上坡前提前降挡。这些操作和"到达目的地"没有任何关系——它们是你和机械之间的"协议成本"。一个优秀的手动挡司机，40% 的注意力花在路况上，60% 花在变速箱上。
useMemo、useCallback、React.memo 就是 React 世界里的"手动换挡"。它们和你的业务逻辑无关，纯粹是你为了满足 React 渲染机制的要求而付出的"协议成本"。
React Compiler 就是自动变速箱。你只需要踩油门和方向盘——专注于目的地。变速箱（编译器）会在最佳时机自动完成所有优化。
但这里有一个关键的区别：自动变速箱不需要你理解变速箱的原理。React Compiler 需要你理解 React 的渲染原理。 因为 Compiler 的前提是"语义正确的代码"——如果你写出了违反 React 规则的代码（比如在渲染期间修改外部状态），Compiler 不仅不会帮你优化，还会让 bug 更难被发现。
这就是为什么源码级的理解在 Compiler 时代不是变得不重要了，而是变得更重要了。你不再需要手动优化，但你比以往任何时候都更需要理解 React 的渲染规则——因为 Compiler 会假设你遵守了这些规则。
本书与其他 React 书的区别
| 类别 | 典型内容 | 读完之后你会… |
|---|---|---|
| 概念入门书 | JSX 语法、组件生命周期、Hooks 基本用法、状态管理入门 | 能用 React 写页面，但不知道 setState 之后发生了什么 |
| API 实战书 | Next.js 项目实战、状态管理方案对比、性能调优技巧、测试策略 | 能搭建生产项目，但遇到诡异的渲染 bug 无从下手 |
| 本书 | 从零手写 React 核心（虚拟 DOM → Fiber → 并发渲染 → Hooks → Compiler），逐模块解剖源码实现 | 理解 React 为什么这样设计，能从源码层面定位任何渲染问题 |
区别的核心在于：概念书教你使用 React，实战书教你用好 React，本书教你理解 React 是如何被构建的。
这不是一本让你"知其然"的书，而是一本让你"知其所以然"的书。每一个设计决策背后的 trade-off，每一个被放弃的替代方案，每一个看似"理所当然"的实现中隐藏的精妙权衡——这些才是源码级理解的真正价值。
教科书给你答案。源码给你问题——以及回答这些问题的完整思考过程。
本书读者
这本书为五类读者而写：
想突破"高级初学者"瓶颈的前端工程师 —— 你已经用 React 写了一两年项目，Hooks 信手拈来，但面试被问到"React 的并发模式是怎么实现的"时哑口无言。本书帮你从"会用"跨越到"理解"。
追求极致性能的资深开发者 —— 你负责大型 React 应用的性能优化，需要知道 useTransition 到底比 setTimeout 好在哪里，Fiber 的时间切片如何与浏览器帧率协作。本书给你源码级的确切答案。
准备面试大厂的候选人 —— React 源码相关问题是高级前端面试的高频考点。本书不是面试题集，但当你理解了 Fiber 树的构建、diff 算法的三个假设、Hook 链表的工作原理之后，面试题不过是换了种问法的源码导读。
框架作者和技术架构师 —— 你正在设计自己的 UI 框架或组件库，需要理解 React 在并发渲染、优先级调度、编译时优化方面的设计权衡。本书提供可直接借鉴的架构经验。
学生与研究者 —— 前端框架的设计模式是软件工程的绝佳案例。本书每章末尾的思考题覆盖概念理解、实践应用和开放讨论三个层次，可用于课堂教学和研究参考。
不适合的读者：如果你还没有写过 React 项目，建议先完成官方教程。本书假设你已经熟悉 React 的基本用法（JSX、组件、Hooks、状态管理），并具备 TypeScript 基础。我们不会解释什么是 useState，但会告诉你 useState 内部是如何用链表管理状态队列的。
本书知识架构
下图展示了本书覆盖的核心知识模块及其相互关系：
React 19 范式转变全景
下图描述了 React 从手动优化时代到编译时智能时代的关键转变：
本书与 React 生态的关系
阅读路线图
本书分为上下两个部分：上半部分从零手写精简版 React（对应 React 最初形态），下半部分深入 React 18 Fiber 架构的完整实现。
| 路径 | 章节 | 适合 |
|---|---|---|
| 快速精华 | 前言 → 第1章 → 第8章（Fiber 理论） → 第12章（Hooks） | 时间有限，3-4 小时获取 80% 核心认知 |
| 初次源码之旅 | 第1章 → 第2-7章（上半部分，精简版全流程） → 第8章 | 首次读源码，从最简实现建立直觉 |
| Fiber 深潜 | 第8章 → 第9-11章 → 第13-15章 | 有 React 基础，直入 Fiber 核心引擎 |
| 性能优化专精 | 第1章 → 第6章 → 第13章（Lane 模型） → 第14章（调度） → 第15章（并发） | 负责性能优化，关注调度与并发机制 |
| 面试突击 | 第1章 → 第4章（DOM Diff） → 第8章 → 第12章（Hooks） → 各章思考题 | 目标明确，聚焦高频考点 |
建议：如果时间允许，顺序通读是最佳路径。每章旁边打开源码编辑器，边读边调试，效果远胜走马观花。
源码与约定
本书上半部分从零手写精简版 React，帮助读者建立直觉；下半部分基于 React 18 源码深入 Fiber 架构的完整实现，并在关键章节引入 React 19 和 React Compiler 的对比分析。
代码示例使用 TypeScript/TSX。所有从源码中提取的代码片段均标注对应文件路径。部分代码为可读性做了适度简化，但核心逻辑与设计意图始终忠实保留。
全书约定：
// 省略表示为可读性省略的非关键代码// 重点标记当前讨论的核心逻辑- 文件路径以 React 源码仓库根目录为基准，如
packages/react-reconciler/src/ReactFiber.ts - 每章末尾的思考题分三个层次：概念理解、实践应用、开放讨论
配套资源
- React 源码仓库：github.com/facebook/react — 本书解析的源码
- 本书配套代码：github.com/yangyitao100/react-source-code — 每章的手写实现代码
- 在线阅读：book.yangyitao.com — 本书在线版本
- 勘误与反馈：欢迎通过 GitHub Issues 提交勘误和建议
致谢
最深的谢意，献给 React 团队。从 Jordan Walke 在 2013 年创建第一个版本，到 Sebastian Markbage 设计 Fiber 架构，到 Andrew Clark 实现并发模式，到 Lauren Tan 和团队打造 React Compiler——React 的每一次进化，都凝结着顶尖工程师在真实约束下的极致思考。本书中剖析的每一个设计决策，都是对他们工作的致敬。
感谢整个 React 社区。Dan Abramov 的博客让无数人第一次"看见"了 React 内部的思考过程；Sophie Alpert 的技术演讲让复杂的并发概念变得平易近人；无数开源贡献者的 PR、Issue 和 RFC 讨论，构成了 React 持续进化的养分。
感谢我的家人。写书的无数个深夜，是他们的理解与支持让我能够心无旁骛地沉浸在源码与架构的世界里。
感谢你，读者。在短视频与碎片信息的时代，选择一本源码级技术书籍，本身就是一种价值声明——你相信深度理解的力量，相信慢功夫终究会带来快回报。你翻开这本书的那一刻，就已经和我站在了同一边。
我们正处于 React 从"手动优化"迈向"编译时智能"的历史拐点。回望前端发展史，2024-2026 或许会被铭记为"编译器时刻"——正如 2017 年 Fiber 架构重写确立了 React 并发渲染的基础范式，今天的 Compiler 也将重新定义"什么是好的 React 代码"。
好的代码会被重写，好的架构会被传承，好的设计思想永不过时。
这本书不教你用 React——它教你理解 React 背后的系统。
这本书献给每一个在深夜读源码的人。
杨艺韬 2026 年春，北京