〇、先来看看常用的常量
NoWork = 0
noTimeout = undefined
HostRoot = 3
NoContext = 0b000;
AsyncMode = 0b001;
StrictMode = 0b010;
ProfileMode = 0b100;
NoEffect = /* */ 0b00000000000
enableProfilerTimer = __PROFILE__
__PROFILE__: true
isDevToolsPresent = typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== ‘undefined’
一、制造root._internalRoot 的 createFiberRoot 方法
export function createFiberRoot(
containerInfo: any, // id=app 的 dom
isAsync: boolean, // false
hydrate: boolean, // false
): FiberRoot {
const uninitializedFiber = createHostRootFiber(isAsync);
const root = {
current: uninitializedFiber, // 添加fiber 属性 一直用它
containerInfo: containerInfo, // dom app
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, //false
nextExpirationTimeToWorkOn: NoWork,
expirationTime: NoWork,
firstBatch: null,
nextScheduledRoot: null,
};
uninitializedFiber.stateNode = root;
return root;
}
通过上面的代码得知,造出来的root._internalRoot 是一个包含若干属性的对象,其中最重要的是一个名叫 current的属性,这个current属性在上一集我们说到虚拟dom渲染过程的时候被当做第一参数 传入了 渲染核心函数 enqueueUpdate中。
这个current属性是个核心
二、 制造current属性的createHostRootFiber(isAsync)方法
export function createHostRootFiber(
isAsync: boolean // false
): Fiber {
// export type TypeOfMode = number;
// export const NoContext = 0b000;
// export const AsyncMode = 0b001;
// export const StrictMode = 0b010;
// export const ProfileMode = 0b100;
let mode = isAsync ? AsyncMode | StrictMode : NoContext; // 0b000
// __PROFILE__: true,
// export const enableProfilerTimer = __PROFILE__;
// export const isDevToolsPresent = typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined';
if (enableProfilerTimer && isDevToolsPresent) {
// Always collect profile timings when DevTools are present.
// This enables DevTools to start capturing timing at any point–
// Without some nodes in the tree having empty base times.
mode |= ProfileMode; // 0b100
}
// export const HostRoot = 3; // Root of a host tree. Could be nested inside another node.
return createFiber(HostRoot, null, null, mode);
}
这些代码无非是通过入参 isAsync 确定了mode的值,用来决定创造出的current是个具有根节点属性的东西
三、通用方法createFiber -> new FiberNode(…)
createFiber方法只是简单的返回了 new FiberNode(…),我们只需要看FiberNode是个啥
function FiberNode(
tag: TypeOfWork,
pendingProps: mixed,
key: null | string,
mode: TypeOfMode,
) {
// Instance
this.tag = tag;
this.key = key;
this.type = null;
this.stateNode = null; // Fiber
this.return = null;
this.child = null;
this.sibling = null;
this.index = 0; this.ref = null; this.pendingProps = pendingProps;
this.memoizedProps = null;
this.updateQueue = null;
this.memoizedState = null;
this.firstContextDependency = null; this.mode = mode; // Effects
// export const NoEffect = /* */ 0b00000000000;
this.effectTag = NoEffect;
this.nextEffect = null; this.firstEffect = null;
this.lastEffect = null; this.expirationTime = NoWork; //
this.childExpirationTime = NoWork; // this.alternate = null; if (enableProfilerTimer) {
this.actualDuration = 0;
this.actualStartTime = 0;
this.selfBaseDuration = 0;
this.treeBaseDuration = 0;
}
}
附加了一堆将来fiber架构需要用到的属性,具体这些属性是干啥用的,咱们以后再分析
不知道大家还记不记得这个root从我们调用reactDOM.render 传入那个container 往上附加了多少有用的东西,现在来回顾一下:
container 就是咱们传入的那个真实dom
container = {
_reactRootContainer :{ // legacyCreateRootFromDOMContainer
_internalRoot: { // DOMRenderer.createContainer
current:{} // new FiberNode
}
}
}
在dom上附加了这么一串有用的对象