（三）React的初始化阶段

一、前文回顾

在上一章我们主要了解了fiber的一些相关知识，以及fiber的结构还有宏观的工作机制，总得来讲，可以归纳为fiber节点由JSX对象生成，JSX -> fiber，也可以将fiber理解为是react对VDOM的实现。

二、三大模块的基本运作方式

由于初始化阶段的也是在react工作流程中完成的，所以我们先大概的了解下rect三个模块的运作方式

图片来自[图解React](https://7kms.github.io/react-illustration-series/main/macro-structure)

首先我们知道react新架构中有三个主要模块，分别是调度器(scheduler)、协调器(react-reconciler)、渲染器(react-dom)

• react-dom：渲染器
• react-reconciler：协调器
• scheduler：调度器

比如渲染器通过updateContainer函数接入协调器，协调器通过scheduleCallback接入调度器，调度器通过回调函数回到协调器，最终协调器通过commitRoot函数接入渲染器。

三、初始化阶段

一般react应用的起点都是ReactDOM.render，上面所说的updateContainer函数也是发生在ReactDOM.render阶段中，可以理解为调用ReactDOM.render后会做一些前提准备工作，完成后通过updateContainer进入到协调阶段，开始fiber节点的创建和构建fiber树。

四、fiber节点的创建

在上一篇文章中我们说过fiber架构的工作机制，通过指针来切换工作树和UI树，所以我们现在就需要一个结构体，并且这个结构体拥有current这个属性。

1、初始化阶段

初始化阶段指的是调用ReactDOM.render之后做的一些准备工作，时机在开始更新之前，所以也可以称为准备阶段。

当然在初始化阶段还做了一些其他的事情，比如初始化更新队列（updateQueue），初始化事件监听...

当我们调用ReactDOM.render之后经过一系列的函数调用，最终来到了createFiberRoot函数，这个函数内部会创建我们上面说到的结构体（fiberRootNode），接着创建rootFiber，然后将fiberRootNode的current属性赋值为rootFiber，最终将fiberRootNode返回。

这里的tag由new ReactDOMBlockingRoot(container, LegacyRoot, options)传入，一步步传到createFiberRoot函数，不同模式下创建的应用tag都是不一样的，比如Blocking模式下创建的应用tag就为BlockingRoot，Concurrent模式下的应用tag为ConcurrentRoot。

执行完毕之后就会调用updateContainer函数，进入协调阶段（react-reconciler），也可以理解为开始工作阶段。

2、工作阶段（react-reconciler）

初始化阶段大概的内容如下，完成了容器节点和根fiber节点的创建，并且给其属性进行赋值

到了工作阶段，回顾一下我们上一篇的双缓存机制，react内部会维护两棵树，分别是UI树和工作树，这里的UI树我们可以理解为上图的rootFiber，此时页面上是空白的，接下来我们会根据rootFiber节点，来创建工作树的第一个节点，这个过程在prepareFreshStack函数内部执行，我们可以来简单的看一下这个函数具体做了什么。

这里先了解一下workInProgress，也就是我们上面说的工作树，这里关键看一下createWorkInProgress这个函数，因为这个函数的返回值会赋值给workInProgress。

我们先看一下传参，第一个参数是root.current，也就是初始化阶段那张图里面的rootFiber，接着再看下函数内部的具体实现。

这里省略了一些其他现在不需要关注的逻辑，直接看整个函数最关键的几个步骤，首先，调用createFiber函数，传入的参数大部分都是根据rootFiber节点来传的，这里也印证了我们上面的那句话根据rootFiber节点，来创建工作树的第一个节点，接着赋值给workInProgress，然后会进行一个节点连接的操作，alternate这个属性在上一篇文章已经解释了，在这里会将两个节点相连，通过alternate，最终将workInProgress返回，至此工作树的第一个节点就创建完毕，后续就会根据workInProgress节点创建一个个子fiber节点，最终大概的内容如下图所示。

五、总结

这里我们总结一下这篇文章的主要内容，我们介绍了三大模块之间的连接方式，以及React初始化阶段所做的事情，下一篇文章会讲fiber节点的创建，以及fiber树的形成。感谢观看🙏🙏🙏！！！