从现在开始,阅读React源码
那么首先,从哪里开始?
万事开头难,尤其是阅读源码这条路子,如果我们连从哪里入手都不知道,阅读起来就很难有系统性的联系、
前置知识
首先我们要知道,React16之后的架构如下
- Scheduler(调度器)—— 它负责调度任务的优先级,将优先级高的任务传入协调器 #new!
- Reconciler(协调器)—— 负责找出变化的组件传入渲染器
- Renderer(渲染器)—— 负责渲染任务,将渲染器传来的组件渲染进页面
对应的架构是怎么体现在文件上的,我们目前并不知道,实际上我目前也不完全理解,不过我们还是可以进入下一步了
根目录
根目录其实不算繁杂(对比很多其他库)
忽略带.
的隐藏文件夹,那么实际上的文件夹如下:
- fixtures:【固定设施】包含一些给贡献者准备的小型测试项目
- packages:这是React源码存放的地址,我们之后要从这里开始阅读
- scripts:好说,这里写着各种脚本
packages
源码的元
这里就存在太多文件夹了,主要可以划分成这样:
- react- 开头的文件夹
- react文件夹
- scheduler调度器文件夹
- shared 发现这里存放着很多公用的变量、函数、类型,那这块晚点看
- 其他包
那么我们会发现这里有两个显而易见的核心react&&scheduler,当然react-开头的文件夹也是重点,其中对应架构的文件夹基本如下:
Renderer渲染器放在哪?
- react-art
- react-native-renderer
- react-noop-renderer
- react-test-renderer
嗯对...带着很明显的渲染 相关词汇。
这里其实还应该包含
- react-dom
这里是SSR服务端渲染的入口
试验性的一些文件夹
- react-server 在这里可以创建自定义SSR流
- react-client 创建自定义流
- react-fetch 用于数据请求,这个不用说
- react-interactions 用于测试交互相关的内部特性,比如React的事件模型
- react-reconciler 上文说过,reconciler是协调器,这里让我们可以构建自己的Renderer
辅助包
- react-is 用于测试组件是否是某类型
- react-refresh
热重载的react官方实现;
我们接下来,应该是从react-reconciler开始学,为啥?
我们需要重点关注react-reconciler,在接下来源码学习中 80%的代码量都来自这个包。 虽然他是一个实验性的包,内部的很多功能在正式版本中还未开放。但是他一边对接Scheduler,一边对接不同平台的Renderer,构成了整个 React16 的架构体系。——魔术师卡颂
下一篇文章,研究一下Fiber架构