学习 React 源码的五个层次

一、掌握基本实现思路

知道一些术语、概念和基本的实现思路，如 createElement/render/concurrent mode/fiber/hooks。

用 300 行实现一个 React，参考https://pomb.us/build-your-own-react/，或中文版https://qcsite.gatsbyjs.io/build-your-own-react

二、掌握整体工作流程及局部细节

整体工作流程包括 3 个阶段：

1、schedule 调度，对应 scheduler 调度器模块，用于决定更新的优先级排序；

2、render 协调，对应 reconciler 协调器，用于决定要更新哪些视图；主要由 fiber 实现，且操作的是代表视图的节点，不是实际视图本身；

3、commit 渲染，对应 renderer 渲染器，用于做实际的视图操作，和平台相关，每个平台单独发包，如 ReactDOM/ReactNative/ReactART 都有单独的包。

局部细节，如 diff 算法、hooks 的实现，会理解到 class/hooks/view 之间的层次关系，无压力搞定相关面试。

三、掌握关键流程的细节

比如，scheduler 调度器内部用的小顶堆、eventloop 机制；

reconciler 协调器内部用的 fiber 深度遍历算法、单向双向链表操作；

lane 模型所使用的二进制方式；

concurrent mode 并发模型的实现细节。

掌握这层，可以在你遇到瓶颈时，助你探索前端的边界，比如可视化、效率工具链、组件框架。

四、掌握思想

理解 class compopent 面向对象与 function component 函数式的区别、优劣势；

从 react 最初的 state 到 view 映射的角度去理解 hooks 的由来，以及为解决副作用引入的代数效应实践。

掌握这层，让你在创造新东西时，有不同的思考角度。

五、大佬的世界

向 react committer 看齐。