React源码阅读(一):从目录结构开始

2022-08-12 11:36:00 浏览数 (1)

从现在开始,阅读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架构

0 人点赞