学习React源码的五个层次

203 阅读1分钟

一、掌握基本实现思路

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

用300行实现一个React,参考pomb.us/build-your-…,或中文版qcsite.gatsbyjs.io/build-your-…

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

整体工作流程包括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看齐。

mp.weixin.qq.com/s/yH7OWltEa…