阿姨，React源码好难懂，我不想努力了

应届生小A：在学校用React + antd作事后台管理系统，熟悉React技术栈。

两年前端小B：公司技术栈是React，都用了一年了，我React贼六。

五年前端老C：带团队把公司的粪坑项目用React重构了。React对我来讲就跟呼吸同样容易。

小A、小B、老C：要不学学React源码吧。

......

%……&（&……% ，怎么这么难懂，阿姨，我不想努力了。

明确学习目的

考虑下，你的学习目的是：

1. 真的想学React源码。

2. 只想理解React的大致工做流程，了解一些常常被大佬们提起的名词（好比Diff算法、Fiber架构、时间切片），好和面试官吹水。

若是是2，向你推荐一篇mini教程build-your-own-react，包教包会，谁用谁知道。同时你能够关闭这篇文章了。

若是是1，那咱们接着往下看。

源码为何难懂

你决定首先看看源码的目录

满怀信心的打开facebook/react仓库下的packages目录，印入眼帘的是一屏翻不完的20+文件夹。

你据说React的主要调度逻辑在react-reconciler目录下，你轻点鼠标，印入眼帘的大概有80+文件。

怎么这么多，阿姨，我不想努力了。

你听别人说看源码要从第一个commit看起

你翻页翻断了手指，终于找到13年的commit。

这和如今的React（v16.13.1）差了10w个版本，早就重构三轮了。

怎么变化这么快，阿姨，我不想努力了。

你决定从ReactDOM.render开始debug

全部React应用都是经过ReactDOM.render建立的，那么从入口一直debug到页面更新不就是整个流程了么。

你一步一步向下调试，一分钟过去了，流程还没走完。你发现流程里有不少异步调用，连debug到哪了都不知道。

怎么这么复杂，阿姨，我不想努力了。

你决定找现成的教学

先搜搜免费的，一搜搜出一大堆。怎么一来就是贴大段大段代码。我就是不懂React是如何执行的，你上来就给我贴React内执行部的代码？

再搜搜收费的，嗯，几百大洋，为了学源码，我忍。但是为何讲的代码和当前React版本差这么多啊？

怎么这么难，阿姨，我不想努力了。

其实，形成你们不想努力的缘由能够归结为两点：

1. 身份难转换

框架使用者和框架开发者视角彻底不一样。

框架使用者主要关注业务实现，而框架开发者须要关注框架的设计理念如何落实。

问问本身，React的设计理念是什么，你知道么。

2. 大量功能堆砌在流程中没法分离

即便你只想关注某个功能点（好比ReactDOM.render如何渲染页面）。但大量功能实现的代码也是耦合在这个流程中的，调试时很容易陷入源码的汪洋大海。

源码该怎么懂

咱们来分别看看两个难点如何解决。

1. 身份难转换

让咱们站在框架开发者角度看看React的设计理念：

React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。

那么什么样的架构才能支撑“快速响应”呢？什么样的代码才能实现这套架构呢？

发现了么，从“理念”到“代码”，有三层抽象递减的过程。

抽象下降          抽象下降
设计理念 -------> 框架架构 -------> 代码实现 复制代码

这就是为何网上不少讲React 代码实现的教学让人难以理解的缘由 —— 你根本不懂这些代码背后实现的意义。

因此你须要从“理念”出发，理解了架构是如何设计的，才能懂代码为何这么写。

2. 大量功能堆砌在流程中没法分离

若是有一本讲解源码的书，每次只关注一个功能的实现（好比useState如何更新DOM，Diff算法如何执行），同时没有大段大段的源码演示。每一个功能再提供一个在线Demo让我本身能调试一下这个功能实现的流程。

那想必是极好的。

能同时知足1和2的教学有么？

有，这就是React技术揭秘

免费么？开源的，只求一个star。Github地址

本书的宗旨是打造一本严谨、易懂的React源码分析教程。

为了达到这个目标，在行文上，本书会遵循：

• 不预设观点 —— 全部观点来自React核心团队成员在公开场合发表的内容。

• 丰富的辅助资料 —— 包括在线Demo、文章视频。

• 代码剪枝 —— 讲解流程时只关注流程相关的代码，省略额外功能的干扰。

• 保持更新 —— 在React版本更新后会及时补充。当前版本v16.13.1开发版

阿姨，我还能再努力一把！！！