前言

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

• 核心原理
• useState
• useEffect
• useContext
• 其他 Hooks API

重点篇幅

• Fiber
• Update
• Scheduler
• React.Children.map
• ...

后面会附流程图辅助学习

需要你做什么

• 足够耐心：React 的 Fiber 重构前后花了 3 年，看源码不会 3 周就看完了，所以你要有足够耐心；
• 思考再思考：自我验证；
• 善于提问和记笔记：不要留着问题不解决，因为终有一天你还是碰到它；

通读源码意义所在

适合人群

• React 开发者
• 想要参与开源项目
• 想要成为高级开发

你还可以

下一篇：React 源码解析之总览