React源码怎么学习？怎样学习才能更快上手

在不久前， v17.0.0-alpha.0 已经合并入 React 的 master 分支。

这意味着，并发模式（ Concurrent Mode ）离生产环境又进了一步。

从 v15～v16 重构的 Fiber架构 ，再到 v16～v17 新增的 并发模式 ， React 已经逐渐从 UI库 变为小型的 操作系统 。

对于想学习 React 源码的同学来说，这同时是 机遇 与 挑战 。

挑战是： React 内部运行流程真的很复杂。

机遇是：学懂之后，即使除去 前端领域 的知识外，你的收获将不限于：

编程范式：函数式编程的 代数效应 思想

操作系统：如何从零实现 协程 （可以理解为 generator ）

数据结构：链表、树、小顶堆

算法：O(n)的Diff算法、各种位运算

浏览器运行机制

前端同学想扩展自己的知识边界，从学习 React 源码下手是个不错的选择。

源码为什么难懂
从 机遇 可以看到，小到具体 算法 ，大到 编程思想 ，要了解源码运行流程，需要学习很多前置知识。

我们调试一个库的源码，一般从他的入口函数开始 debug 。对于 React 来说，这个入口就是 ReactDOM.render 。
打印从 ReactDOM.render 执行到 视图渲染 过程的调用栈会发现：这中间的调用流程非常复杂，甚至还有异步流程。

bat一线互联网面试真题详解企业及项目开发实战详解
可以添加前端学习群：1017810018 大家一起学习
小助理微信：hxhn_7758
lyf___1201

初学源码的同学很容易陷入在源码的汪洋大海中，从入门到放弃。

源码该怎么学
如果将调用栈按功能划分，可以分为三块：
分别对应了源码架构中的三大模块：

调度 - 协调 - 渲染

所以，在学习具体代码前，更好的方式是先了解 React 的架构体系。

那么 React 为什么要这样架构呢？

我们作为开发者，在开发一个功能前会关注实现这个功能的目的——是为了更好的用户体验，还是商业化的目的？

同样， React 团队作为框架的开发者，在开发 React 前也会关注实现目的。这个目的，就是 React 的设计理念。

可以从 官网React哲学 了解到，设计理念如下：

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

可见， React 的设计初衷就是为了践行 快速响应 的理念。

从 理念 出发，你就会了解到：

是什么在制约 快速响应 ？答： CPU 的瓶颈与 IO 的瓶颈

如何解决瓶颈？答：以 并发 的模式更新视图

为什么 React 要推出 Fiber 架构？答： React15 的架构无法实现 并发更新

总结
从 理念 到 架构 ，从 架构 到 实现 ，这是符合大脑认知的自顶向下的学习步骤。

这种方式固然好，但是需要总结大量的权威知识才能做到从 理念 到 实现 都和 React 核心团队成员的想法一致。

bat一线互联网面试真题详解企业及项目开发实战详解
可以添加前端学习群：1017810018 大家一起学习
小助理微信：hxhn_7758
lyf___1201