如何学习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
执行到 视图渲染
过程的调用栈会发现:这中间的调用流程非常复杂,甚至还有异步流程。
初学源码的同学很容易陷入在源码的汪洋大海中,从入门到放弃。
源码该怎么学
如果将调用栈按功能划分,可以分为三块:
分别对应了源码架构中的三大模块:
调度 - 协调 - 渲染
所以,在学习具体代码前,更好的方式是先了解 React
的架构体系。
那么 React
为什么要这样架构呢?
我们作为开发者,在开发一个功能前会关注实现这个功能的目的——是为了更好的用户体验,还是商业化的目的?
同样, React
团队作为框架的开发者,在开发 React
前也会关注实现目的。这个目的,就是 React
的设计理念。
可以从 官网React哲学 了解到,设计理念如下:
React 是用 JavaScript 构建 快速响应
的大型 Web 应用程序的首选方式。
可见, React
的设计初衷就是为了践行 快速响应
的理念。
从 理念
出发,你就会了解到:
-
是什么在制约
快速响应
?答:CPU
的瓶颈与IO
的瓶颈 -
如何解决瓶颈?答:以
并发
的模式更新视图 -
为什么
React
要推出Fiber
架构?答:React15
的架构无法实现并发更新
总结
从 理念
到 架构
,从 架构
到 实现
,这是符合大脑认知的自顶向下的学习步骤。
这种方式固然好,但是需要总结大量的权威知识才能做到从 理念
到 实现
都和 React
核心团队成员的想法一致。
为此,我写了一本开源的电子书:
完全按照 自顶向下
的模式讲解 React
源码。
同时为了保证理解没有偏差,书中所有言论都来自 React
核心团队成员在公开场合的分享。
希望可以帮到想拓宽知识边界的你,同时也希望能给个 star
。