今天，我开始尝试对React框架的结构和功能实现进行更全面的了解。源代码分析。今天是第一个，主要介绍基本概念。
本文主要指GitHub中的“插图react源代码序列”。
React的项目目录中有35个数据包（17.0.2版）。还有4个重要的核心软件包。他们是：
提供定义反应元素的必要函数，包括最常用的API。
您可以在网页的React-Reconciler中输出运行结果，并且更重要的输入功能包括。
它主要用于管理React应用程序状态的输入和结果输出，并且可以将输入信号最终转换为渲染器的输出信号。主要过程如下：
它是调度机制的核心实现。它将控制React-Reconciler的执行时间以发送回调函数，并且可以在并发模式下实现任务分片。有两个主要功能：
如果对React应用程序的总体结构进行了分配，则可以将整个应用程序分解为两个部分：接口层和内核层。
通常在通常开发中使用的大多数API，例如SetState，调度等，但不包括All。React开始后，可以更改三个基本操作：
React的内核可以分为三个部分。它们充当不同的功能：
在看到不同方向的核心套件后，我们可以找到两个更重要的工作周期。它们是任务调度周期和光纤构造循环，它们位于调度程序和React-Reconciler的两个核心包中。
主要角色位于调度程序中，是回收和控制所有任务计划。
它位于React-Reconciler中，主要控制纤维树的结构。总体过程是深度优先级遍历的过程。
在了解两个工作周期之间的差异和连接之后，可以发现React的操作逻辑实际上是负责安排每个任务的任务调度周期。光纤构造的周期负责特定的实现任务，即转换为输出的核心步骤的输入。
也可以总结如下：
接下来，让我们在每个软件包中介绍高频对象，这些对象从React到页面渲染中更频繁地出现。
该软件包包含React组件和某些API的必要函数。在它们之后，需要理解的是Reactelment对象。我们可以假设有一个输入函数：
可以认为该应用程序及其所有子节点都是ReactElement对象，但它们与它们的类型不同。
可以认为，JSX语法中编写的所有节点都将汇编为React.Createlement（...）的形式，因此它们创建了ReactElment对象。数据结构如下：
其中，值得注意的是：
这是一种类型，可以被视为一种特殊的反应元素。这里是原始作者的一个简单示例：
我们可以观察编译后获得的代码，并且可以发现CreateElement函数的第一个参数将用作创建ReactEllement的一种类型，并且此内容变量将被命名为App_content，为CreateElement的第一个参数。
从那以后，您可以得出两个结论：
顺便说一句，您还可以提出反应元素的内存结构。显然，它应该是类似树的结构，但它也具有链接列表的特征：
React-Reconciler连接到渲染器和调度中心，它也将负责纤维树的结构。
光纤对象是React中数据的核心。我们可以在反应internaltypes.js中找到其类型的定义：
光纤对象中有一个属性光纤。这是连锁队列。查看源代码：
挂钩主要用于函数组件，可以维护函数组件的状态。常用的API包括USESTATE，USESTATE，usefeft，usecallback等。相同，让我们看看源代码如何定义挂钩对象的数据结构：
从中，我们可以看到钩子和光纤之间的连接：在光纤对象中有一个属性纤维。将指向光纤节点的内存状态。在功能组件中，它将指向钩子队列。
调度程序将在内部维护任务队列，该任务队列是数组的最小堆栈，该堆栈存储任务对象。
任务对象的类型定义不在调度程序中，而是在JS代码中直接定义：
如今，React软件包中的宏结构可以分为三个部分：调度程序，React-Reconciler和React-Dom。工作流示意图以促进对记忆的理解?
原始：https：//juejin.cn/post/7099103637770600461