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