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; // 0
  this.childExpirationTime = NoWork; // 0

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