React 源码讲解第 3 节- FiberRoot 对象

上一节 React 源码讲解第 2 节-入口 API 之 ReactDOM.render 讲到 render 函数的核心步骤。其中非常重要的一个环节就是创建 FiberRoot 对象 。本小节就来介绍一下 FiberRoot 对象包含哪些重要的内容。

FiberRoot 作用

1. FiberRoot 是整个应用的根节点。
2. FiberRoot 包含应用挂载的目标节点。
3. FiberRoot 记录整个应用更新过程中的各种信息。

FiberRoot 与 RootFiber 的关系

FiberRoot.current = RootFiber
FiberRoot 的当前节点就是 RootFiber。

RootFiber.stateNode = FiberRoot
RootFiber 的真实节点就是 FiberRoot。

  //初始化RootFiber
  const uninitializedFiber = createHostRootFiber(tag);
  //FiberRoot和RootFiber的关系
  //FiberRoot.current = RootFiber
  root.current = uninitializedFiber;
  //RootFiber.stateNode = FiberRoot
  uninitializedFiber.stateNode = root;

FiberRoot 属性

function FiberRootNode(containerInfo, tag, hydrate) {
    
    
  //root 节点类型()
  this.tag = tag;
  //当前应用root节点对应的Fiber对象
  this.current = null;
  //root根节点，render方法的第二个参数
  this.containerInfo = containerInfo;
  //在持久更新中会用到，不支持增量更新的平台，react-dom 是整个应用更新，所以用不到
  this.pendingChildren = null;
  //缓存
  this.pingCache = null;
  //当前更新对应的过期时间
  this.finishedExpirationTime = NoWork;
  //已经完成任务的FiberRoot对象，在commit(提交)阶段只会处理该值对应的任务
  this.finishedWork = null;
  //在任务被挂起的时候通过setTimeout设置的返回内容，用来下一次如果有新的任务挂起时清理还没触发的timeout
  this.timeoutHandle = noTimeout;
  //顶层 context 对象
  this.context = null;
  this.pendingContext = null;
  // 用来确定第一次渲染的时候是否需要融合
  this.hydrate = hydrate;
  //回调节点
  this.callbackNode = null;
  //回调属性
  this.callbackPriority = NoPriority;
  //树中存在的最旧的未到期时间,第一次挂起的时间。
  this.firstPendingTime = NoWork;
  //第一次 Suspended 时间
  this.firstSuspendedTime = NoWork;
  //最后一次 Suspended 时间
  this.lastSuspendedTime = NoWork;
  //挂起任务中的下一个已知到期时间
  this.nextKnownPendingLevel = NoWork;
  //树中存在的最新的未到期时间
  this.lastPingedTime = NoWork;
  //最新的过期时间
  this.lastExpiredTime = NoWork;

  {
    
    
    //交互线程id
    this.interactionThreadID = tracing.unstable_getThreadID();
    //内存线程
    this.memoizedInteractions = new Set();
    //
    this.pendingInteractionMap = new Map();
  }
}