跳到主要内容

认识

2023年11月30日
柏拉文
越努力，越幸运

一、认识​

createRoot() 用于客户端创建 React 渲染的根节点, 有 render 和 unmount 两个方法。主要工作是创建整个应用的 FiberRoot, 创建一个 UpdateQueue 放入更新队列, 调用 scheduleUpdateOnFiber 进入调度更新流程。初始化流程如下:

  1. 创建 root 应用根节点对象 HostRootFiber 与 FiberRootNode, 然后关联两个对象

    • FiberRootNode: 是 React 应用的根节点, 它的作用是负责应用加载相关的内容，比如应用加载模式mode，存储本次应用更新的回调任务以及优先级，存储创建完成的FiberTree等。

    • HostRootFiber: 是虚拟DOM树的根节点，类型是FiberNode, 针对普通 DOM 元素或者组件创建的 Fiber 对象，是虚拟DOM的真实体现

  2. 初始化 HostRootFiber.updateQueue, 创建一个 updateQueue 更新队列

  3. 给根元素绑定了所有事件，任何子孙元素触发的该类型事件都会委托给根元素的事件回调处理

  4. 以同步的优先级, 创建一个 update 对象，包含了更新的信息，将其添加到组件的更新队列中, 开启调度更新流程

二、工作​