FiberRootNode
在 React 的 Fiber 架构中，FiberRootNode 是一个关键的数据结构，它代表了整个 React 应用的根节点。FiberRootNode 负责管理应用的状态、调度更新和协调渲染。
FiberRootNode 的功能:
- 状态管理: FiberRootNode 管理整个 React 应用的状态，包括当前的 Fiber 树和待处理的更新。
- 更新调度: 负责调度应用的状态更新，确保高优先级的更新能够优先处理。
- 协调渲染: 协调和处理整个应用的渲染过程，从根节点开始遍历和更新 Fiber 树。
FiberRootNode 的结构
FiberRootNode 是一个复杂的对象，它包含多个属性来管理和协调应用的状态和更新。以下是 FiberRootNode 的主要属性：
containerInfo：保存根容器的信息（例如 DOM 元素）。
current：指向当前 Fiber 树的根节点 (即 HostRootFiber).
pendingChildren：指向待处理的子节点列表。
finishedWork：指向已经完成工作的 Fiber 树。
timeoutHandle：用于处理异步更新的定时器。
context 和 pendingContext：用于管理上下文信息。
callbackNode 和 callbackPriority：用于调度更新的回调函数和优先级。
HostRootFiber
HostRootFiber 是 Fiber 树的根节点，它承担了 React 应用的初始挂载和后续更新的协调工作。其主要功能包括：
- 初始化挂载: 当 React 应用第一次渲染时，HostRootFiber 负责从根节点开始构建 Fiber 树，并将 React 组件渲染到 DOM 中。
- 状态管理: 管理 React 应用的全局状态，包括上下文和更新队列。
- 更新调度: 处理状态更新，并根据优先级调度这些更新，以确保高优先级的更新能及时响应。
- 渲染协调: 从根节点开始协调 Fiber 树的渲染过程，处理 DOM 的更新和重新渲染。
HostRootFiber 的结构
HostRootFiber 作为一个 Fiber 节点，包含了一些特定的属性来管理和协调应用的状态和更新。以下是 HostRootFiber 的一些关键属性：
tag：标识 Fiber 节点的类型，对于 HostRootFiber，其值是 HostRoot。
stateNode：指向与此 Fiber 节点关联的具体实例，对于 HostRootFiber，它指向 FiberRootNode。
updateQueue：保存需要处理的更新。
memoizedState：存储已计算的状态。
pendingProps 和 memoizedProps：分别存储新的和已计算的属性。
FiberRootNode 和 HostRootFiber 的关系
- FiberRootNode 是整个 React 应用的根节点，用于管理应用的状态、调度更新和协调渲染。
- HostRootFiber 是 Fiber 树的根节点，它挂载在 FiberRootNode 上，并通过 FiberRootNode 的 current 属性指向。
创建与初始化
在调用 ReactDOM.render 时，React 会创建 FiberRootNode 和 HostRootFiber，并初始化它们的关系。以下是一个简化的过程描述：
- 创建 FiberRootNode: 当 ReactDOM.render 被调用时，会首先创建一个 FiberRootNode，它包含整个应用的状态和调度信息。
- 创建 HostRootFiber: 然后创建一个 HostRootFiber，并将其关联到 FiberRootNode 的 current 属性。
- 挂载与渲染: 接着，React 会从 HostRootFiber 开始构建 Fiber 树，并将组件渲染到 DOM 中。
总结
- HostRootFiber 是 Fiber 树的根节点，负责管理和协调应用的初始挂载和后续更新。
- FiberRootNode 管理整个 React 应用的状态和调度信息，而 HostRootFiber 通过 FiberRootNode 的 current 属性指向。
- 创建与初始化 在调用 ReactDOM.render 时完成，React 会创建 FiberRootNode 和 HostRootFiber，并从根节点开始构建和渲染 Fiber 树。
