源码分析之React中的FiberRoot节点属性介绍

概览

FiberRootNode是一个构造函数，用于创建FiberRoot即Fiber根节点，是整个React应用的起点，包含了整个应用的状态信息。

源码解析

FiberRootNode的源码实现如下：

js 复制代码

function FiberRootNode(
  containerInfo,
  tag,
  hydrate,
  identifierPrefix,
  onUncaughtError,
  onCaughtError,
  onRecoverableError,
  onDefaultTransitionIndicator,
  formState
) {
  this.tag = 1; // FiberRoot的类型 1表示并发模式ConcurrentRoot ；0 表示传统模式 LegacyRoot
  this.containerInfo = containerInfo; // 宿主容器，即React应用挂载的DOM节点
  this.pingCache = // 用于缓存ping操作的结果，与Suspense相关
    this.current = // 指向当前页面上显示的Fiber树（current树）的根节点，即HostRootFiber
    this.pendingChildren = null; // 等待渲染的子元素，通常在更新时使用
  this.timeoutHandle = -1; // 用于存储setTimeout返回的id，用以清除
  this.callbackNode = // 调度器返回的任务节点，用于取消任务
    this.next = // 指向下一个FiberRoot，在多个React应用时可能使用
    this.pendingContext = // 等待处理的上下文
    this.context = // 当前上下文
    this.cancelPendingCommit = // 用于取消尚未提交的更新
      null;
  this.callbackPriority = 0; // 回调优先级，表示当前正在执行的任务的优先级
  this.expirationTimes = createLaneMap(-1); // 一个数组，存储每个lane对应的过期时间
  this.entangledLanes =// 表示哪些lane是一起的，它们的更新必须一起处理
    this.shellSuspendCounter = //与Suspense相关的计数器，用于跟踪挂起的shell主内容数量
    this.errorRecoveryDisabledLanes =// 禁止错误恢复的lane
    this.expiredLanes =//已过期的lane，需要立即同步更新
    this.warmLanes = // 预热lane，用于并发更新，表示已经准备就绪的更新
    this.pingedLanes = // 被ping的lane，与suspense相关，表示可以重新尝试更新的lane
    this.suspendedLanes = // 被挂起的lane，表示暂停的更新
    this.pendingLanes = //等待处理的lane，表示所有待处理的更新
      0;
  this.entanglements = createLaneMap(0); // 一个数组，表示每个lane与其他lane的纠缠关系
  this.hiddenUpdates = createLaneMap(null); // 一个数组，存储每个lane上隐藏的更新
  this.identifierPrefix = identifierPrefix;// 用于生成React唯一ID的前缀
  this.onUncaughtError = onUncaughtError; // 未捕获错误的回调函数
  this.onCaughtError = onCaughtError; // 已捕获错误的回调函数
  this.onRecoverableError = onRecoverableError; // 可恢复错误的回调函数
  this.pooledCache = null;// 缓存的池，用于缓存资源
  this.pooledCacheLanes = 0; // 使用缓存池的lane
  this.formState = formState; //与表单状态相关，用于React的状态管理
  this.incompleteTransitions = new Map(); // 未完成的过渡的映射，用于并发模式下的过渡更新
}

`FiberRoot`

FiberRoot在ReactDOM.createRoot时都会被创建，它负责管理整个应用的更新任务，包括任务的调度、优先级、挂起和恢复等。

FiberRoot工作流程

js 复制代码

// 创建 FiberRoot
const root = createFiberRoot(
  containerInfo,
  tag,
  hydrate,
  identifierPrefix,
  onRecoverableError
);

// 调度更新
scheduleUpdateOnFiber(root, fiber, lane);

// 渲染完成
commitRoot(root);

总结

FiberRootNode 是 React 渲染系统的核心，它管理着：

渲染调度 ：通过 Lane 模型管理更新优先级
状态管理：维护应用状态和更新队列
错误处理：提供完整的错误处理机制
缓存系统：优化渲染性能
并发控制：支持可中断渲染和时间切片

关键特性：

双缓存架构 ：通过 current 和 alternate 树平滑切换
优先级调度 ：Lane 模型支持精细的优先级控制
错误恢复：完善的错误边界和恢复机制
资源管理：缓存、预加载等优化手段
过渡处理：支持 React 18+ 的过渡更新

理解 FiberRootNode 的结构和工作原理对于深入理解 React 内部机制、性能优化和高级特性开发至关重要。