React 源码讲解第 3 节- FiberRoot 对象
上一节 React 源码讲解第 2 节-入口 API 之 ReactDOM.render 讲到 render 函数的核心步骤。其中非常重要的一个环节就是创建 FiberRoot 对象 。本小节就来介绍一下 FiberRoot 对象包含哪些重要的内容。
FiberRoot 作用
- FiberRoot 是整个应用的根节点。
- FiberRoot 包含应用挂载的目标节点。
- 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();
}
}