深入FiberRoot

60次阅读

共计 1320 个字符,预计需要花费 4 分钟才能阅读完成。

1. 介绍

整个应用的起点
包含应用挂载的目标起点
记录整个应用更新过程的各种信息

2. 相关函数及内容
export function createContainer(
containerInfo: Container,
isConcurrent: boolean,
hydrate: boolean,
): OpaqueRoot {
return createFiberRoot(containerInfo, isConcurrent, hydrate);
}
在 createContainer 中我们返回了 createFiberRoot 函数的执行结果,然就在 ReactFiberRoot 中我们调用了 createFiberRoot,,它返回一个 root 对象:
root = ({
current: uninitializedFiber,
// 代表当前对应的 fiber,这里是未初始化的 fiber
containerInfo: containerInfo,
// 代表容器的节点
pendingChildren: null,
// 只有在持久化更新的平台会用到,在 react-Dom 中不会被用到
earliestPendingTime: NoWork,
// 最老的正在进行中的任务,这里初始化都为 Nowork 为 0,最低优先级
latestPendingTime: NoWork,
// 最新的正在进行中的任务
earliestSuspendedTime: NoWork,
// 最老的被挂起的任务
latestSuspendedTime: NoWork,
// 最新的被挂起的任务
latestPingedTime: NoWork,

pingCache: null,

didError: false,
// 标记整个应用在渲染的过程中是否有错误
pendingCommitExpirationTime: NoWork,
// 正在提交的任务的 ExpirationTime,也就是优先级
finishedWork: null,
// 在 render 阶段已经完成了的任务,在 commit 阶段只会执行 finishedWork 的任务
timeoutHandle: noTimeout,
// 用来清理还没有被触发的计时器
context: null,
// 顶层的 context 对象,只用在调用“renderSubTreeIntoContainer”的时候在有用
pendingContext: null,
hydrate,
// 应用是否要和原来的 dom 节点进行合并
nextExpirationTimeToWorkOn: NoWork,
// 记录下一次将要进行的对应的优先级的任务
expirationTime: NoWork,
// 当前的优先级的任务
firstBatch: null,

nextScheduledRoot: null,
// 链表的结构,两次 react-Domrender 渲染的。。节点的链表
interactionThreadID: unstable_getThreadID(),
// 交互的线程 id
memoizedInteractions: new Set(),
// 上次交互的线程 id 的 Set 对象
pendingInteractionMap: new Map(),
// 进行中的交互的线程的 Map 对象
}: FiberRoot);

正文完
 0