那个公司做的网站详情页好看,网站营销费用,广告宣传方式有哪些,国外网建站关于 FiberRoot 1 #xff09;概述
在 ReactDOM.render 过程当中#xff0c;创建了一个 ReactRoot的对象这个 ReactRoot 对象最主要承担了创建 FiberRoot 对象这个对象它非常重要#xff0c;在后期整个应用调度过程当中都会跟它有关关于 FiberRoot 对象 A. 它是整个应用的起…关于 FiberRoot 1 概述
在 ReactDOM.render 过程当中创建了一个 ReactRoot的对象这个 ReactRoot 对象最主要承担了创建 FiberRoot 对象这个对象它非常重要在后期整个应用调度过程当中都会跟它有关关于 FiberRoot 对象 A. 它是整个应用的起点B. 它包含了ReactDOM.render 传进去的第二个参数 就是一个dom节点我们应用挂载的那个节点相关的一些信息 C. 它还记录着整个应用更新过程当中的各种信息 应用更新过程当中会涉及到各种各样的东西 比如各种不同类型的 expirationTime还有异步调度任务的callback这些东都会记录在这个 FiberRoot 上面
2 ) 相关源码
在 ReactRoot 构造函数中基于 DOMRenderer.createContainer 创建了 FiberRoot 对象// ReactDOM.js
function ReactRoot(container: Container,isConcurrent: boolean,hydrate: boolean,
) {const root DOMRenderer.createContainer(container, isConcurrent, hydrate);this._internalRoot root;
}// ReactFiberReconciler.js
export function createContainer(containerInfo: Container,isConcurrent: boolean,hydrate: boolean,
): OpaqueRoot {return createFiberRoot(containerInfo, isConcurrent, hydrate);
}// ReactFiberRoot.js
export function createFiberRoot(containerInfo: any,isConcurrent: boolean,hydrate: boolean,
): FiberRoot {// Cyclic construction. This cheats the type system right now because// stateNode is any.const uninitializedFiber createHostRootFiber(isConcurrent);let root;if (enableSchedulerTracing) {root ({// root 节点对应的Fiber对象(root节点也是可能会更新的)是 Root Fiber// 后续整个应用都会有一个Fiber的树结构任何一个ReactElement的节点都会对应一个Fiber对象// ReactElement是一个树结构, Fiber对象也会有一个树结构// 它是Fiber树结构的顶点current: uninitializedFiber,containerInfo: containerInfo, // ReactDOM.render 传进去的第二个参数 dom 节点pendingChildren: null, // 只有在持久更新中会用到也就是不支持增量更新的平台react-dom中不会被用到在server-render中会被用到因为它需要输出很多字符串类型的html节点// 以下的优先级是用来区分// 1 ) 没有提交(committed)的任务// 2 ) 没有提交的挂起任务// 3 ) 没有提交的可能被挂起的任务// 最老和最新的不确定是否会挂起的优先级 (所有任务进来一开始都是这个状态)earliestPendingTime: NoWork,latestPendingTime: NoWork,// 最老和最新的在提交的时候被挂起的任务earliestSuspendedTime: NoWork,latestSuspendedTime: NoWork,// 最新的通过一个promise被resolve并且可以重新尝试的优先级latestPingedTime: NoWork,didError: false, // 在renderRoot 出现无法处理的错误时会被设置为 truependingCommitExpirationTime: NoWork, // 正在等待提交的任务的 expirationTime// 已经完成的任务的FiberRoot对象如果你只有一个Root, 它永远只可能是这个Root对应的Fiber, 或者是 null// 在 commit 阶段只会处理这个值对应的任务// 用于记录在一次更新渲染过程当中完成了的更新任务, 因为整棵树中会存在各种不同的更新任务// 每一次更新会渲染优先级最高的任务优先级最高的任务渲染完成之后就是一个 finishedWork标记在应用的Root上面// 更新完了要把应用输出到Dom节点上面输出的过程就是读取的这个 finishedWork 值finishedWork: null,// 在任务被挂起的时候通过setTimeout设置的返回内容// 用来下一次如果有新的任务挂起时清理还没触发的timeout// 例如Suspense 组件功能, 在render function 中 throw 一个 Promise, 之后任务会被挂起// 挂起之后可以渲染 Suspense 组件的 fallback, 等到 Promise resolve之后// 它就会把 resolve之后的数据显示出来这时候就会有一个 timeoutHandle来帮助我们记录超时的情况的// 这个会在后续的更新流程中timeoutHandle: noTimeout,// 顶层 context 对象, 只有主动调用 renderSubtreeIntoContainer 时才会有用// renderSubtreeIntoContainer 这个API出场率非常低不常用context: null,pendingContext: null,// 用来确定第一次渲染的时候是否需要融合// 应用是否要跟原来存在的dom节点进行合并hydrate,// 当前root上剩余的过期时间// 用来标记这一次更新渲染的时候要执行的是哪个优先级的任务// 应用更新过程中会遍历到每一个节点每个节点如果有更新会有自己的一个 ExpirationTime// root 上记录整个应用当中优先级最高的 ExpirationTime // 在更新的过程中会根据这个nextExpirationTimeToWorkOn变量去进行一个更新// 就是说如果遍历到某个节点发现自己的 ExpirationTime 比这个值要大则说明它优先级要低// 且还轮不到它来更新就可以进行一个跳过这就是这个变量的用处nextExpirationTimeToWorkOn: NoWork,// 当前更新对应的过期时间// 用在我们调度的过程当中, 和 上面的 nextExpirationTimeToWorkOn 大部分时间都是相同的// 但是也会有一定的区别expirationTime: NoWork,// 暂时不管这个firstBatch: null,// root之间关联的链表结构// 这个属性是单向链表的属性// 比如dom节点有 root1 和 root2 两个div// ReactDOM.render 把一个应用渲染在 root1 中把另一个应用渲染在 root2 中// 这时候会存在两个root, 它们在react中会用 nextScheduledRoot 这个属性进行一个串联// 在整个react更新调度过程中在这个链表中去找哪个root对应的优先级最高执行那个root的更新// 一个root里面又会有不同优先级的任务在里面它整体的过程是非常的复杂nextScheduledRoot: null,interactionThreadID: unstable_getThreadID(),memoizedInteractions: new Set(),pendingInteractionMap: new Map(),}: FiberRoot);} else {root ({current: uninitializedFiber,containerInfo: containerInfo,pendingChildren: null,earliestPendingTime: NoWork,latestPendingTime: NoWork,earliestSuspendedTime: NoWork,latestSuspendedTime: NoWork,latestPingedTime: NoWork,didError: false,pendingCommitExpirationTime: NoWork,finishedWork: null,timeoutHandle: noTimeout,context: null,pendingContext: null,hydrate,nextExpirationTimeToWorkOn: NoWork,expirationTime: NoWork,firstBatch: null,nextScheduledRoot: null,}: BaseFiberRootProperties);}uninitializedFiber.stateNode root;// The reason for the way the Flow types are structured in this file,// Is to avoid needing :any casts everywhere interaction tracing fields are used.// Unfortunately that requires an :any cast for non-interaction tracing capable builds.// $FlowFixMe Remove this :any cast and replace it with something better.return ((root: any): FiberRoot);
}3 相关解析
注意上面的各种 Time 非常重要在后续任务调度的过程中用来记录更新所涉及的时间的 js 在浏览器中是单线程的, 我们的应用又是一个树形结构如何去区分不同优先级的任务就要用各种不同的变量去标记这几个变量就是用于去标识不同优先级的任务的 其他字段参考上述源码中注释的释义
