Skip to content

FiberRootNode

json
// FiberRootNode
{
  // 启动模式  0|1|2
  "tag" :  1,
  // 绑定的 根节点对象
  // document.getElementById("root")
  "containerInfo" : {},
  // 等待更新的
  "pendingChildren" : null,
  // 缓存 FiberNode 实例对象
  "current" : null,
  "pingCache" : null,
  "finishedWork" : null,
  "timeoutHandle" : noTimeout,
  "context" : null,
  pendingContext : null,
  callbackNode : null,
  callbackPriority : NoLane,
  eventTimes : createLaneMap(NoLanes),
  expirationTimes : createLaneMap(NoTimestamp),
  // 未执行的 Update 的 lanes
  pendingLanes : NoLanes,
  // 因数据加载(如 Suspense)而暂停的更新车道。当组件处于挂起状态时,相关更新会被标记在此处。
  suspendedLanes : NoLanes,
  // 被外部事件(如网络请求完成)唤醒的更新车道。用于恢复因 Suspense 暂停的渲染。
  pingedLanes : NoLanes,
  // 已过期的更新车道。优先级最高,必须立即处理以避免视觉卡顿。
  expiredLanes : NoLanes,
  // 可变读取车道。在渲染过程中临时存储需要读取的优先级,避免重复计算。
  mutableReadLanes : NoLanes,
  // 已完成的更新车道。包含已成功渲染的更新,用于后续清理或提交操作。
  finishedLanes : NoLanes,
  // 纠缠车道。表示与其他车道共享优先级的更新(例如,多个 Suspense 边界相互依赖)。
  entangledLanes : NoLanes,
  // 纠缠映射表。记录每个车道与其他车道的纠缠关系,用于优先级传播和合并。
  entanglements : createLaneMap(NoLanes),

  hiddenUpdates : createLaneMap(null),

  identifierPrefix : identifierPrefix,
  onRecoverableError : onRecoverableError,
}

pendingLanes

等待执行的 Update 的 lane 的合集

在生成一个新的 Update 时,会将其 lane 与 pendingLanes 进行合并,然后将其赋值给 pendingLanes

scheduleUpdateOnFiber 调度更新的时候

  • 会根据 pendingLanes 中的 lane 来生成对应的过期时间 并存放到 expirationTimes 中
  • 会根据 pendingLanes 中的 lane 和 expirationTimes 中对应的过期时间,判断是否存在 饥饿 lane , 并将其赋值给 expiredLanes

expiredLanes

饥饿任务的 lane 的合集

每一个任务都有其对应的过期时间,当高优先级任务执行过长后,保证低优先级任务不会永远挂起,所以当成为饥饿 lane 的时候,会优先执行

suspendedLanes

挂起的车道

当渲染过程中,切换车道、遇到致命错误等导致渲染中断的情况,都会将当前的车道标记为挂起的车道,并保存到 root.suspendedLanes 中。