React 19 内核探秘

前言

作者 杨艺韬 · 3,088 字

前言

写作动机

useMemo、useCallback、React.memo、useRef 存回调——这些 API 构成了 React 16-18 时代性能优化的"标准工具集"。在一个有嵌套组件、列表渲染和跨层级回调的真实页面里，它们往往占据了组件代码的相当比例：业务逻辑之外，还有一半左右的代码在描述"怎样避免不必要的重渲染"。这就是过去十年 React 开发者都熟悉的"优化税"。

一个合理的问题是：

开发者到底在优化 React，还是在跟 React 的心智模型搏斗？

2026 年，React 19 正式发布，React Compiler 进入生产可用阶段。过去那些手写的 useMemo、useCallback、手动 memo 在大多数场景下已不再必要——编译器会根据语义分析自动完成等价的记忆化。这不仅是 API 的更替，而是心智模型的重构：从"开发者负责告诉 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 时代意味着什么

让我用一个类比来说明这次范式转变的深度。

想象你在开一辆手动挡汽车。你需要时刻关注转速表，在正确的时机换挡，下坡时用发动机制动，上坡前提前降挡。这些操作和"到达目的地"没有任何关系——它们是你和机械之间的"协议成本"。一个优秀的手动挡司机，注意力会在路况判断和变速箱控制之间不断切换。

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 内部是如何用链表管理状态队列的。

本书知识架构

下图展示了本书覆盖的核心知识模块及其相互关系：

graph TD
    subgraph 上半部分["上半部分：从零手写精简版 React"]
        A["虚拟 DOM 设计哲学"] --> B["手写 Reconciliation"]
        B --> C["手写 Diff 算法"]
        C --> D["手写 Commit 阶段"]
        D --> E["手写 Hooks 系统"]
    end

    subgraph 下半部分["下半部分：React 18 Fiber 架构"]
        F["Fiber 节点与双缓冲"] --> G["Scheduler 调度器"]
        G --> H["Reconciliation 深度解析"]
        H --> I["Commit 阶段源码"]
        I --> J["Hooks 源码实现"]
        J --> K["合成事件系统"]
    end

    subgraph React19["React 19 新范式"]
        L["并发模式"] --> M["React Compiler"]
        M --> N["Server Components"]
        N --> O["Server Actions"]
    end

    E --> F
    K --> L

    style 上半部分 fill:#e3f2fd,stroke:#1565c0
    style 下半部分 fill:#e8f5e9,stroke:#2e7d32
    style React19 fill:#fff3e0,stroke:#e65100

React 19 范式转变全景

下图描述了 React 从手动优化时代到编译时智能时代的关键转变：

graph LR
    subgraph 旧范式["React 16-18：手动优化"]
        A1["开发者编写业务逻辑"] --> A2["开发者手动添加<br/>useMemo / useCallback / memo"]
        A2 --> A3["运行时 Reconciliation"]
        A3 --> A4["DOM 更新"]
    end

    subgraph 新范式["React 19 + Compiler：编译时智能"]
        B1["开发者只编写业务逻辑"] --> B2["Compiler 自动分析依赖<br/>并插入记忆化"]
        B2 --> B3["运行时 Reconciliation<br/>+ 并发调度"]
        B3 --> B4["DOM 更新 / RSC 流式传输"]
    end

    旧范式 -->|"范式转变"| 新范式

    style 旧范式 fill:#ffebee,stroke:#c62828
    style 新范式 fill:#e8f5e9,stroke:#2e7d32

本书与 React 生态的关系

graph TD
    R["React 核心源码"] --> V["虚拟 DOM"]
    R --> FIB["Fiber 架构"]
    R --> SCH["Scheduler"]
    R --> REC["Reconciler"]
    R --> HK["Hooks"]

    REC --> DOM["react-dom"]
    REC --> RN["react-native"]
    REC --> RSC["Server Components"]

    FIB --> CONC["并发模式"]
    CONC --> TRANS["Transitions"]
    CONC --> SUSP["Suspense"]

    RC["React Compiler"] --> AUTO["自动记忆化"]
    RC --> HIR["HIR 中间表示"]
    RC --> CG["代码生成"]

    style R fill:#e3f2fd,stroke:#1565c0,stroke-width:2px
    style RC fill:#fff3e0,stroke:#e65100,stroke-width:2px

阅读路线图

本书分为上下两个部分：上半部分从零手写精简版 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.3 / React 19 稳定分支（facebook/react main 分支 2024-2025 快照）深入 Fiber 架构的完整实现，并在关键章节引入 React Compiler 的对比分析。React 源码版本标注遵循以下约定：引用 packages/react-reconciler/src/... 时默认对应 React 19 稳定版（19.0.0 及其后的补丁版本），如果讨论的是历史演化（例如 Stack Reconciler、事件池化等）会在正文中显式注明对应的历史版本号。

代码示例使用 TypeScript/TSX。所有从源码中提取的代码片段均标注对应文件路径。部分代码为可读性做了适度简化，但核心逻辑与设计意图始终忠实保留。

全书约定：

  • // 省略 表示为可读性省略的非关键代码
  • // 重点 标记当前讨论的核心逻辑
  • 文件路径以 React 源码仓库根目录为基准，如 packages/react-reconciler/src/ReactFiber.ts
  • 每章末尾的思考题分三个层次：概念理解、实践应用、开放讨论

配套资源

感谢 React 团队多年积累的设计与文档：从 Jordan Walke 2013 年提出的初版，到 Sebastian Markbåge 主导的 Fiber 架构，到 Andrew Clark 的并发模式，再到 Lauren Tan 及 Compiler 团队持续公开的 RFC 与 Dev blog——这些材料让源码解读有据可循，本书的很多判断都建立在这些一手资料之上。感谢整个 React 社区：Dan Abramov 的 overreacted.io 博客、Sophie Alpert 的演讲、众多贡献者在 PR / Issue / RFC 下的讨论，都是本书重要的参考来源。

React 正从"手动优化"迈向"编译时智能"。2017 年的 Fiber 重写确立了并发渲染的基础，2024-2026 年的 Compiler 则在重新定义"什么是好的 React 代码"。本书的目标是把这两层基础都讲透。

杨艺韬 2026 年春，北京