前言
cat3.jpg
本小书大部分内容来自作者 Jokcy 的 《React 源码解析》: https://react.jokcy.me/
本文已同步在我的博客: http://ruizhengyun.cn/blog/post/6cd72db8.html
感谢 Jokcy 让我深度了解 React。如他所说，在决定阅读 React 源码时认为不会是一件很难的事，但是真正开始阅读之后才发现，事情没那么简单，因为需要足够的耐心、能够独立思考和静下心来（因为你会碰到之前编码没有见过的写法和概念等等）。
干嘛学习源码
干嘛学习源码
- 更好地帮你理解自己写的代码是如何运行的；
- 遇到 bug 时，能帮你从底层去思考并解决问题；
- 在开始一个新项目之前，想好更好的架构方式；
- React 设计细节都是很高明的，学习它有助于提升自身编码能力；
- 互联网寒冬期间，熟悉并可以精通某个技能，可大大提升自己的竞争力，成为升职加薪的基础；
React 特色
无比纯粹
它是一个非常纯粹 UI = fn(x) 的框架，通过 state 映射 UI 的方式来屏蔽 DOM 操作，业界的框架也大抵如此。为什么说 React 纯粹呢？那是因为的 api 设计，核心 api 就是 setState，其余主要内容都围绕组件化来设置，没有 React 双向绑定以及其他 api，要改变一个 UI 只能通过 setState 来改变状态，这就成为了 React 无比纯粹的开发体验。
思想超前
React16 版本是完全重写了 React 代码，但是对于使用者来说是无感知的，光这一点就优秀无比了，不像 vue 或 angular 更新大版本需要调整兼容。更优秀的还在后面，React16 版本引入了Fiber概念，从根本上解决了 js 单线程运行问题。就比如计算量过大，就可能导致动画卡针和交互卡顿等问题。
章节目录部署
第一章 React API
-
createElement; -
createContext; -
JSX => JS; -
ConcurrentMode; -
Ref; -
Component; -
Suspense; -
Hooks;
第二章 React 创建更新
-
ReactDom.render; -
Fiber; -
UpdateQueue; -
FiberRoot; -
expirationTime;
第三章 React 调度过程(Fiber Scheduler)
-
scheduleWork; -
batchedUpdates; -
performWork; -
performUnitOfWork; -
requestWork; -
react scheduler; -
renderRoot;
第四章 React 开始更新
-
beginWork以及优化; - 各类组件的更新过程;
- 调和子节点的过程;
第五章 React 更新后的操作
-
completeUnitOfWork; -
completeWork; -
unwindWork; - 虚拟 DOM 对比;
- 错误捕获处理;
- 完成整棵树更新;
第六章 提交更新，UI 更新
-
commitRoot整体流程; - 提交快照;
- 提交 DOM 更新;
- 提交所有声明周期;
- 开发时的帮助方法;
- 提交 DOM 插入;
- 提交 DOM 删除;
第七章 各种功能的实现过程
-
context的实现过程; -
ref的实现过程; -
hydrate的实现过程; - React 的事件体系;
第八章 Suspense
- 更新优先级的概念
-
Suspense组件更新 -
retry重新尝试渲染 - 更新挂起的概念
-
timeout处理 -
lazy组件更新
Hooks
- 核心原理
useStateuseEffectuseContext- 其他 Hooks API
重点篇幅
- Fiber
- Update
- Scheduler
- React.Children.map
- ...
后面会附流程图辅助学习
需要你做什么
- 足够耐心：React 的 Fiber 重构前后花了 3 年，看源码不会 3 周就看完了，所以你要有足够耐心；
- 思考再思考：自我验证；
- 善于提问和记笔记：不要留着问题不解决，因为终有一天你还是碰到它；
通读源码意义所在
| 外在 | 内在 |
|---|---|
| 提高开发能力 | 提高学习能力 |
| 解决问题能力 | 提高思考能力 |
| 提升自身价值 | 提升设计能力 |
适合人群
- React 开发者
- 想要参与开源项目
- 想要成为高级开发
