React设计原理

本书特点

本书致力于剖析React设计理念与实现原理，基于React 18源码讲解。通过本书的学习，读者可以对当前主流前端框架的实现原理有清晰的认识，并对React从理念到实现层面有比较深入的理解。

不管是代码量还是运行时的复杂程度，React在前端开源库中都是名列前茅的。为了防止读者陷入源码的汪洋大海，本书会努力践行“知识屏蔽”（在教学过程中只关注当前学习的知识，屏蔽超纲知识对读者的干扰的原则），力争每一章内容都能够帮助读者撬动React版图的一角，使读者学完全书后全面认识React。这也是第6章才讲解用于初始化应用的API（ReactDOM.createRoot）的原因，其基础是完整的React首屏渲染流程，因此本书用前面5章的篇幅介绍流程中的基础知识，再用第6章内容串联这些知识。

从宏观上讲，本书遵循“自顶向下”的行文模式，以一种符合认知的逻辑递进顺序从“设计理念”“架构设计”“具体实现”3个层次讲解React的相关知识。基于此，全书可分为3篇：

• 第1章～第2章为理念篇，讲解React在主流前端框架中的定位与设计理念。
• 第3章～第5章为架构篇，讲解React架构中的3个阶段——render、commit、schedule，以及如何在架构中践行设计理念。
• 第6章～第8章为实现篇，贯穿React架构中的3个阶段，讲解具体API的实现细节。

从微观上讲，React是由多个模块组成的monorepo（一种代码仓库的管理方式，在单个代码仓库中管理多个项目），每个模块将承担工作流程中特定的职责。

本书精心设计了7个编程项目，帮助读者动手实现与前端框架相关的重要模块，包括6个模块的迷你实现：

• 实现细粒度更新
• 实现ReactDOMRenderer
• 实现schedule阶级
• 实现事件系统
• 实现Diff算法
• 实现useState

还包括1个课程设计：

• 在React源码中实现一个新的原生Hook

本书配套了一个源码调试项目和众多的在线示例，有兴趣深入学习React源码的读者可以自行探索。

希望本书为读者带来愉快的学习体验。

辅助资料

本书的所有代码示例都可以在微信公众号“魔术师卡颂”后台回复“设计原理”获取，而以下示例仅为演示执行效果，所以仅提供在线阅读：示例2-1、示例2-5、示例3-1、示例4-1、示例4-3和示例8-9。

读者交流

由于笔者水平有限，书中难免有疏漏，恳请广大读者批评指正。如果读者在阅读过程中发现错误，或者想加入本书的交流群与笔者及其他读者交流讨论，请在微信公众号“魔术师卡颂”后台回复“设计原理”。

致谢

本书的诞生，要感谢很多人。以下致谢不分先后，按照时间线推进的顺序表达。

首先要感谢几位对我职业发展帮助很大的前辈。位是我的好兄弟公子，从他身上我看到了对编程纯粹的热爱。接下来要感谢我在360奇舞团任职期间的领导——成银与月影，他们维护的浓郁技术氛围，引导我走上了“知识输出”的道路。

感谢微信公众号“魔术师卡颂”的读者，有你们的关注与支持，我才有动力持续输出“前端框架”这一领域的知识，并终凝结成本书。

此外，我还要感谢出版社的黄爱萍老师全程热心细致的工作，让我能有信心完成本书的编写。

后，感谢我的女朋友李贝贝，谢谢你在我全职写作期间的支持与包容。码字会让人感到枯燥，但与你共度的四季不会。

                                                                                                                                                         卡颂      

                                                                                                                                                2022年6月20日

本书致力于剖析React设计理念与实现原理，基于React 18版本源码讲解。全书划分为3个篇章，第1篇为理念篇（第1章～第2章），讲解React在主流前端框架中的定位与设计理念。第2篇为架构篇（第3章～第5章），讲解React架构中的3个阶段——schedule、render、commit，以及如何在架构中践行设计理念。第3篇为实现篇（第6章～第8章），贯穿React架构中的3个阶段，讲解具体API的实现细节。本书的目标读者包括有实际React项目经验并希望更深入理解React的开发人员，以及没有使用过React但对前端框架设计感兴趣的开发人员。通过学习本书，读者可以对当前主流前端框架的实现原理有清晰的认识，并对React从理念到实现层面有更深入的理解。

本书致力于剖析React设计理念与实现原理，基于React 18版本源码讲解。全书划分为3个篇章，第1篇为理念篇（第1章～第2章），讲解React在主流前端框架中的定位与设计理念。第2篇为架构篇（第3章～第5章），讲解React架构中的3个阶段——schedule、render、commit，以及如何在架构中践行设计理念。第3篇为实现篇（第6章～第8章），贯穿React架构中的3个阶段，讲解具体API的实现细节。本书的目标读者包括有实际React项目经验并希望更深入理解React的开发人员，以及没有使用过React但对前端框架设计感兴趣的开发人员。通过学习本书，读者可以对当前主流前端框架的实现原理有清晰的认识，并对React从理念到实现层面有更深入的理解。

卡颂，前端工程师。曾先后就职于360奇舞团、字节跳动等企业。技术社区活跃者，开源电子书《React技术揭秘》的作者。

第1篇 理念篇 
第1章 前端框架原理概览 2 
1.1 初识前端框架 3 
1.1.1 如何描述UI 3 
1.1.2 如何组织UI与逻辑 8 
1.1.3 如何在组件之间传输数据 12 
1.1.4 前端框架的分类依据 14 
1.1.5 React中的自变量与因变量 18 
1.2 前端框架使用的技术 20 
1.2.1 编程：细粒度更新 20 
1.2.2 AOT 29 
1.2.3 Virtual DOM 32 
1.3 前端框架的实现原理 35 
1.3.1 Svelte 35 
1.3.2 Vue3 43 
1.3.3 React 46 
1.4 总结 48 
第2章 React理念 49 
2.1 问题与解决思路 49 
2.1.1 事件循环 50 
2.1.2 浏览器渲染 53 
2.1.3 CPU瓶颈 55 
2.1.4 I/O瓶颈 56 
2.2 底层架构的演进 57 
2.2.1 新旧架构介绍 58 
2.2.2 主打特性的迭代 60 
2.2.2 渐进升级策略的迭代 61 
2.3 Fiber架构 65 
2.3.1 FiberNode的含义 65 
2.3.2 双缓存机制 68 
2.3.3 mount时Fiber Tree的构建 69 
2.3.4 update时Fiber Tree的构建 71 
2.4 调试React源码 72 
2.4.1 仓库结构概览 73 
2.4.2 以本书推荐方式调试源码 74 
2.4.3 以官方方式调试源码 75 
2.5 总结 77 
第2篇 架构篇 
第3章 render阶段 80 
3.1 流程概览 81 
3.2 beginWork 83 
3.3 React中的位运算 87 
3.3.1 基本的三种位运算 88 
3.3.2 位运算在“标记状态”中的应用 89 
3.4 completeWork 90 
3.4.1 flags冒泡 91 
3.4.2 mount概览 91 
3.4.3 update概览 96 
3.5 编程：ReactDOM Renderer 98 
3.6 总结 104 
第4章 commit阶段 105 
4.1 流程概览 106 
4.1.1 子阶段的执行流程 108 
4.1.2 Effects list 111 
4.2 错误处理 113 
4.2.1 捕获错误 115 
4.2.2 构造callback 116 
4.2.3 执行callback 118 
4.3 BeforeMutation阶段 119 
4.4 Mutation阶段 120 
4.4.1 删除DOM元素 120 
4.4.2 插入、移动DOM元素 122 
4.4.3 更新DOM元素 125 
4.4.4 Fiber Tree切换 127 
4.5 Layout阶段 127 
4.6 总结 129 
第5章 schedule阶段 130 
5.1 编程：简易schedule阶段实现 131 
5.1.1 Scheduler简介 133 
5.1.2 改造后的schedule方法 134 
5.1.3 改造后的perform方法 137 
5.1.4 改造后的完整流程 140 
5.2 Scheduler的实现 148 
5.2.1 流程概览 149 
5.2.2 优先级队列的实现 151 
5.2.3 宏任务的选择 152 
5.3 Lane模型 154 
5.3.1 React与Scheduler的结合 155 
5.3.2 基于expirationTime的算法 159 
5.3.3 基于Lane的算法 163 
5.4 Lane模型在React中的应用 166 
5.4.1 初始化lane 168 
5.4.2 从fiberNode到FiberRootNode 171 
5.4.3 调度FiberRootNode 173 
5.4.4 调度策略 175 
5.4.5 解决饥饿问题 178 
5.4.6 root.pendingLanes工作流程 182 
5.5 Batched Updates 186 
5.5.1 Batched Updates发展史 187 
5.5.2 不同框架Batched Updates的区别 189 
5.6 总结 190 
第3篇 实现篇 
第6章 状态更新流程 192 
6.1 编程：简易事件系统实现 193 
6.1.1 实现SyntheticEvent 195 
6.1.2 实现事件传播机制 196 
6.1.3 收集路径中的事件回调函数 197 
6.1.4 捕获、冒泡阶段的实现 198 
6.2 Update 201 
6.2.1 心智模型 201 
6.2.2 数据结构 202 
6.2.3 updateQueue 206 
6.2.4 产生update 207 
6.2.5 消费update需要考虑的问题 211 
6.2.6 消费update 214 
6.3 ReactDOM.createRoot流程 219 
6.4 useState流程 220 
6.5 性能优化 222 
6.5.1 eagerState策略 223 
6.5.2 bailout策略 227 
6.5.3 bailout策略的示例 233 
6.5.4 bailout与Context API 235 
6.5.5 对日常开发的启示 239 
6.6 总结 243 
第7章 reconcile流程 244 
7.1 单节点Diff 247 
7.2 多节点Diff 251 
7.2.1 设计思路 254 
7.2.2 算法实现 255 
7.3 编程：实现Diff算法 261 
7.3.1 遍历前的准备工作 264 
7.3.2 核心遍历逻辑 265 
7.3.3 遍历后的收尾工作 267 
7.4 总结 269 
第8章 FC与Hooks实现 270 
8.1 心智模型 271 
8.1.1 代数效应 271 
8.1.2 FC与Suspense 273 
8.1.3 Suspense工作流程 279 
8.2 编程：简易useState实现 284 
8.2.1 实现“产生更新的流程” 284 
8.2.2 实现useState 288 
8.2.3 简易实现的不足 293 
8.3 Hooks流程概览 294 
8.3.1 dispatcher 294 
8.3.2 Hooks的数据结构 296 
8.3.3 Hooks执行流程 297 
8.4 useState与useReducer 299 
8.5 effect相关Hook 302 
8.5.1 数据结构 303 
8.5.2 声明阶段 304 
8.5.3 调度阶段 306 
8.5.4 执行阶段 308 
8.6 useMemo与useCallback 309 
8.6.1 mount时执行流程 309 
8.6.2 update时执行流程 310 
8.6.3 useMemo的妙用 311 
8.7 useRef 312 
8.7.1 实现原理 313 
8.7.2 ref的工作流程 314 
8.7.3 ref的失控 317 
8.7.4 ref失控的防治 318 
8.8 useTransition 321 
8.8.1 useTransition实现原理 322 
8.8.2 useTransition工作流程 324 
8.8.3 entangle机制 326 
8.8.4 entangle实现原理 327 
8.8.5 entangle工作流程 328 
8.9 useDeferredValue 333 
8.10 编程：实现useErrorBoundary 336 
8.10.1 定义dispatcher 338 
8.10.2 实现逻辑 339 
8.10.3 提取公共方法 342 
8.10.4 render阶段错误处理流程 343 
8.10.5 commit阶段错误处理流程 349 
8.11 总结 351

本书致力于剖析React设计理念与实现原理，基于React 18版本源码讲解。全书划分为3个篇章，第1篇为理念篇（第1章～第2章），讲解React在主流前端框架中的定位与设计理念。第2篇为架构篇（第3章～第5章），讲解React架构中的3个阶段——schedule、render、commit，以及如何在架构中践行设计理念。第3篇为实现篇（第6章～第8章），贯穿React架构中的3个阶段，讲解具体API的实现细节。本书的目标读者包括有实际React项目经验并希望更深入理解React的开发人员，以及没有使用过React但对前端框架设计感兴趣的开发人员。通过学习本书，读者可以对当前主流前端框架的实现原理有清晰的认识，并对React从理念到实现层面有更深入的理解。

卡颂，前端工程师。曾先后就职于360奇舞团、字节跳动等企业。技术社区活跃者，开源电子书《React技术揭秘》的作者。

React 自 2013 年横空出世至今已经近十年了，在它的代码每周被下载1800万次的背后，是 React 团队与社区从未停止过的对当下实践的质询，以及对一个更接近性原理的 UI编程抽象的探索。非常庆幸中文社区能有卡颂这样的同学，在 React 18 这个量变引起质变的时间点，他将这一刻的 React 定格在了本书中，详尽地分享了学习 React 源码的心得与思考。源码作为概念的载体，虽常常由于性能因素显得过分晦涩，但它仍是窥探设计哲学真实的桥梁。

React 核心团队成员、Meta 软件工程师 黄玄

本书作者研究React由来已久，从初撰写系列文章，到如今将多年研究成果梳理成书，可以惠及更多同行，对此我感到非常欣慰。应该说这是一本真正的“程序员写给程序员”的书。通过作者对React这个优秀开源项目由浅入深的分析和讲解，读者可以领略其所蕴含的架构思想和设计理念，如果能够融会贯通、学以致用，就一定能够让自己更上一层楼。

“红宝书”“犀牛书”等知名技术图书译者、前端老兵  李松峰

Web应用的需求发展推动了前端框架的演变，React作为这个时代主流的构建UI的渐进式框架，无疑非常具有代表性，虽然我不建议前端工程师将自己的技能与应用框架捆绑，而是希望大家从根源上理解需求发展和思考框架演变，找到自己的前端进阶之路，但剖析主流框架的设计理念，无疑能为前端工程师的成长指明方向，从而少走弯路。这本书不仅仅是使用React的参考资料，更是能真正帮助前端工程师找到适合自己的前端发展之路的工具书。

稀土掘金社区负责人 月影

作者这几年一直致力于对前端框架的研究，对前端框架的技术细节和设计理念有很深的理解。作者根据其多年研究的经验，通过一套标准剖析框架，帮助大家快速了解框架本质。同时，本书从理念到实现层面详细介绍了React的设计原理，通过大量的示例辅助教学和练习，相信可以为读者学习现代前端框架带来更多的启示。

welefen

使用React写代码，已经成为很多前端从业者的日常工作，但我们不能停留在只会使用React的层面，了解React的原理才是成长为React高手的必经之路。本书基于React 18版本，不仅系统地介绍了React实现原理，而且包含重要的实战内容，非常值得阅读。要想深入了解React原理，没有比阅读和动手实现React代码更让人印象深刻的了。

《现代JavaScript库开发：原理、技术与实战》作者  颜海镜