如何学习React源码
source link: https://75.team/post/how-to-learn-react.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
在不久前, 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
。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK