React 16 源码瞎几把解读 【三 点 二】 react中的fiberRoot

〇、先来看看常用的常量

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上附加了这么一串有用的对象