React19源码系列之FiberRoot节点和Fiber节点

在上一篇文章，看了createRoot函数的大致流程。

• createContainer函数创建并返回了FiberRoot 。
• FiberRoot是由createFiberRoot函数创建， createFiberRoot函数还将 FiberRoot和 根Fiber 通过current属性建立起了联系。
• 将FiberRoot作为参数传给 ReactDOMRoot 构造函数，返回带有_internalRoot属性（其实就是参数FiberRoot），render和unmount方法的ReactDOMRoot实例对象。

下面就继续来看一下 FiberRoot 和 Fiber 是如何创建以及他们的各自的属性都具体什么含义。

FiberRootNode 构造函数

FiberRootNode用于创建一个 FiberRootNode 实例，这个实例包含了与整个 React 应用渲染过程相关的各种状态和信息，如挂载的 DOM 容器、当前的 Fiber 树、优先级管理、错误处理回调、表单状态等，为 React 协调器管理和调度整个应用的渲染工作提供了基础。

函数参数含义：
● containerInfo：表示挂载 React 应用的 DOM 容器的信息，通常是一个 DOM 元素，如 document.getElementById(‘root’) 返回的元素。
● tag：用于标识 React 应用的启动模式，可能是并发模式或传统模式。
● hydrate：与服务端渲染的水合（hydration）相关的参数，用于指示是否进行水合操作。
● identifierPrefix：标识符前缀，可能用于生成唯一的标识符。
● onUncaughtError：未捕获错误的回调函数，当应用中出现未捕获的错误时会调用该函数。
● onCaughtError：捕获错误的回调函数，用于处理已捕获的错误。
● onRecoverableError：可恢复错误的回调函数，用于处理可以恢复的错误。
● formState：表单状态，可能包含表单的输入值、验证状态等信息。

function FiberRootNode(this: $FlowFixMe,containerInfo: any,// $FlowFixMe[missing-local-annot]tag,hydrate: any,identifierPrefix: any,onUncaughtError: any,onCaughtError: any,onRecoverableError: any,formState: ReactFormState<any, any> | null,
) {// 启动模式和容器this.tag = disableLegacyMode ? ConcurrentRoot : tag;//启动模式: 1并发模式，0传统模式this.containerInfo = containerInfo;// 挂载DOM容器的信息// fiberthis.pendingChildren = null;// 指向下一个 Fiber 节点树的指针，通常在更新过程中用于存储待处理的子节点。this.current = null;//指向当前 Fiber 节点的指针，代表当前正在渲染的 Fiber 树。this.pingCache = null;// 用于缓存 FiberNode 的引用，以便快速访问。this.finishedWork = null;//存储完成的 Fiber 节点，通常在渲染完成后更新。// 超时和取消this.timeoutHandle = noTimeout;// 处理超时的句柄，初始值为 noTimeout，用于管理渲染过程中的超时情况。this.cancelPendingCommit = null;// 用于取消挂起的提交操作的函数，初始值为 null。//上下文this.context = null; // 当前的上下文对象，用于在组件树中传递数据。this.pendingContext = null;// 当前挂起的上下文，在上下文更新时使用。// 链表this.next = null; // 指向下一个 FiberRootNode 对象的指针，用于构建链表结构。// 回调this.callbackNode = null;// 指向回调函数的 Fiber 节点的指针，用于管理回调函数的执行。this.callbackPriority = NoLane;// 回调优先级this.expirationTimes = createLaneMap(NoTimestamp);// 一个存储各个 Lane 过期时间的映射，通过 createLaneMap 函数创建，初始值为 NoTimestamp。//优先级this.pendingLanes = NoLanes; // 代表待处理的车道集合。NoLanes 表明目前没有待处理的更新任务。this.suspendedLanes = NoLanes; // 表示被挂起的车道集合。在某些情形下，更新任务可能会因为数据未就绪等原因而被挂起。this.pingedLanes = NoLanes;//指需要处理的车道集合。当某个车道被标记为需要处理时，会被添加到这个集合中。this.warmLanes = NoLanes;// 与预热渲染相关的车道集合。预热渲染一般用于提前准备数据或进行一些预计算。this.expiredLanes = NoLanes; // 代表已过期的车道集合。若某个更新任务的优先级较低，且等待时间过长，就可能会过期。this.finishedLanes = NoLanes; // 表示已完成的车道集合。当某个更新任务成功完成后，对应的车道会被添加到这个集合中。this.errorRecoveryDisabledLanes = NoLanes;// 表示禁用错误恢复的车道集合。在某些情况下，可能会禁用某些车道的错误恢复机制。this.shellSuspendCounter = 0;// 挂起计数器this.entangledLanes = NoLanes;// 相关联的 Lanethis.entanglements = createLaneMap(NoLanes);// 相关联的 Lane 的映射this.hiddenUpdates = createLaneMap(null);  // 隐藏更新的 Lane 的映射this.identifierPrefix = identifierPrefix;  // 标识符前缀// 回调this.onUncaughtError = onUncaughtError;this.onCaughtError = onCaughtError;this.onRecoverableError = onRecoverableError;// 可恢复错误的回调函数// 如果 enableCache 为 true，则初始化缓存相关的属性，包括缓存的 FiberNode 和缓存的 Lane。if (enableCache) {this.pooledCache = null; // 缓存的 FiberNodethis.pooledCacheLanes = NoLanes;// 缓存的 Lane}// 如果 enableSuspenseCallback 为 true，则初始化水合回调函数相关的属性。if (enableSuspenseCallback) {this.hydrationCallbacks = null;// 用于注水的回调函数}this.formState = formState; // 表单状态// 一个 Map 对象，用于存储未完成的过渡信息。this.incompleteTransitions = new Map();// 未完成的过渡的映射// 如果 enableTransitionTracing 为 true，则初始化过渡回调函数和过渡 Lane 映射。if (enableTransitionTracing) {this.transitionCallbacks = null;const transitionLanesMap = (this.transitionLanes = []);for (let i = 0; i < TotalLanes; i++) {transitionLanesMap.push(null);}}// 如果 enableProfilerTimer 和 enableProfilerCommitHooks 都为 true，则初始化性能分析相关的属性，用于记录副作用和被动副作用的持续时间。// if (enableProfilerTimer && enableProfilerCommitHooks) {//   this.effectDuration = -0;//   this.passiveEffectDuration = -0;
//  }// 如果 enableUpdaterTracking 为 true，则初始化更新跟踪相关的属性，包括存储已记忆的更新器和每个 Lane 的待处理更新器集合。if (enableUpdaterTracking) {this.memoizedUpdaters = new Set();const pendingUpdatersLaneMap = (this.pendingUpdatersLaneMap = []);for (let i = 0; i < TotalLanes; i++) {pendingUpdatersLaneMap.push(new Set());}}
}

createFiber 函数

createFiber函数，根据组件类型调用不同的函数，默认enableObjectFiber为true，调用createFiberImplObject函数，否则调用createFiberImplClass函数。

const createFiber = enableObjectFiber? createFiberImplObject: createFiberImplClass;

createFiberImplObject

createFiberImplObject 函数是用于创建一个 Fiber 对象的具体实现，Fiber 对象是 React Fiber 架构中的核心数据结构，代表了一个 React 元素或组件的工作单元。该函数根据传入的参数初始化 Fiber 对象的各种属性，这些属性用于描述组件的状态、结构以及在渲染过程中的相关信息。

函数参数含义：
● tag：类型为 WorkTag，表示 Fiber 节点的类型，例如 HostComponent、FunctionComponent 等，不同的类型决定了 Fiber 节点在渲染过程中的不同处理方式。
● pendingProps：类型为 mixed，表示即将传递给组件的属性，这些属性可能会在后续的渲染过程中被使用。
● key：类型为 null 或 string，用于唯一标识 Fiber 节点，在 React 进行列表渲染时，key 可以帮助 React 更高效地进行元素的更新和重排。
● mode：类型为 TypeOfMode，表示 Fiber 节点的模式，例如并发模式、严格模式等，不同的模式会影响 React 的渲染行为。

function createFiberImplObject(tag: WorkTag,// 3代表根节点pendingProps: mixed,// 即将传递给组件的属性。 key: null | string,mode: TypeOfMode,// 渲染模式 并发模式或者传统模式
): Fiber {// 初始化 Fiber 对象const fiber: Fiber = {// Instance// tag, key - defined at the bottom as dynamic propertieselementType: null,// 通常存储 React 元素的类型，如函数组件、类组件或 DOM 元素类型，初始化为 null。type: null,// 与 elementType 类似，但在某些情况下可能会有不同的含义，初始化为 null。stateNode: null,// 存储与 Fiber 节点关联的实际 DOM 节点或组件实例，初始化为 null。// Fiberreturn: null,// 指向父 Fiber 节点，用于在渲染完成后返回上一级。child: null,// 指向第一个子 Fiber 节点。sibling: null,// 指向下一个兄弟 Fiber 节点。index: 0,// 表示当前 Fiber 节点在兄弟节点中的索引位置，初始化为 0。ref: null,// 用于存储 ref 对象，方便获取组件或 DOM 节点的引用。refCleanup: null,// 用于清理 ref 相关的资源，初始化为 null。// pendingProps - defined at the bottom as dynamic propertiesmemoizedProps: null,// 上一次渲染时使用的属性，初始化为 null。updateQueue: null,// 存储组件的更新队列，初始化为 null。memoizedState: null,// 存储组件的状态，初始化为 null。dependencies: null,// 存储组件的依赖项，初始化为 null。// Effectsflags: NoFlags,// 表示 Fiber 节点的副作用标记，初始化为 NoFlags，表示没有副作用。subtreeFlags: NoFlags,// 表示子树的副作用标记，初始化为 NoFlags。deletions: null,// 存储需要删除的子 Fiber 节点，初始化为 null。lanes: NoLanes,// 表示当前 Fiber 节点的优先级车道，初始化为 NoLanes。childLanes: NoLanes,// 表示子 Fiber 节点的优先级车道，初始化为 NoLanes。alternate: null,// 双缓存，指向的另一个版本的fiber// dynamic properties at the end for more efficient hermes bytecodetag,// fiber类型key,// 用于唯一标识 Fiber 节点pendingProps,// 即将传递给组件的属性。 mode,//  Fiber 节点的模式，例如并发模式、严格模式等};// 启用了性能分析器if (enableProfilerTimer) {fiber.actualDuration = -0;// 表示 Fiber 节点实际渲染所花费的时间fiber.actualStartTime = -1.1;// 表示 Fiber 节点开始渲染的时间fiber.selfBaseDuration = -0;// 表示 Fiber 节点自身的基本渲染时间fiber.treeBaseDuration = -0;// 表示 Fiber 节点及其子树的基本渲染时间}// 返回 Fiber 对象return fiber;
}

createFiberImplClass

createFiberImplClass 函数是用于创建 Fiber 节点的另一种实现方式，它通过实例化 FiberNode 类来创建一个 Fiber 对象。

function createFiberImplClass(tag: WorkTag,pendingProps: mixed,key: null | string,mode: TypeOfMode,
): Fiber {// $FlowFixMe[invalid-constructor]: the shapes are exact here but Flow doesn't like constructorsreturn new FiberNode(tag, pendingProps, key, mode);
}

FiberNode 构造函数

FiberNode 是一个构造函数，用于创建 React 的 Fiber 节点。

函数参数含义：
● tag: WorkTag：tag 是一个 WorkTag 类型的值，用于标识 Fiber 节点的类型，例如是函数组件、类组件、原生 DOM 元素等。不同的 tag 值对应不同的处理逻辑。
● pendingProps: mixed：pendingProps 表示当前节点的待处理属性，是一个任意类型的值。这些属性是从父组件传递过来的，在节点的处理过程中可能会被更新。
● key: null | string：key 是一个可选的字符串，用于帮助 React 识别哪些元素发生了变化，提高列表渲染的性能。如果没有提供 key，则为 null。
● mode: TypeOfMode：mode 表示节点的模式，它定义了节点的一些行为和特性，例如是否处于严格模式等。

function FiberNode(this: $FlowFixMe,tag: WorkTag,pendingProps: mixed,key: null | string,mode: TypeOfMode,
) {// Instancethis.tag = tag;this.key = key;this.elementType = null;this.type = null;this.stateNode = null;// 存储与该 Fiber 节点对应的实际 DOM 节点或组件实例，初始化为 null。// Fiberthis.return = null;this.child = null;this.sibling = null;this.index = 0;this.ref = null;this.refCleanup = null;this.pendingProps = pendingProps;this.memoizedProps = null;this.updateQueue = null;this.memoizedState = null;this.dependencies = null;this.mode = mode;// Effectsthis.flags = NoFlags;this.subtreeFlags = NoFlags;this.deletions = null;this.lanes = NoLanes;this.childLanes = NoLanes;this.alternate = null;// if (enableProfilerTimer) {//  this.actualDuration = -0;//  this.actualStartTime = -1.1;//  this.selfBaseDuration = -0;// this.treeBaseDuration = -0;
//  }}