React 16 源码瞎几把解读 【三 点 一】 把react组件对象弄到dom中去(矛头指向fiber，fiber不解读这个过程也不知道)

一、ReactDOM.render 都干啥了

我们在写react的时候，最后一步肯定是

ReactDOM.render(
    <div>
        <Home name="home"/>
    </div>
    ,
    document.getElementById('app')
);

我们上面得知jsx被解析成了虚拟dom对象，我们把一个对象和一个dom传入render方法就得到了我们的页面，好神奇呀，我们开始撸到render方法：

const ReactDOM: Object = {

  render(
    element: React$Element<any>,  // react组件对象
    container: DOMContainer,   // 就是id为app的那个dom
    callback: ?Function, // callback 没有
  ) {
    return legacyRenderSubtreeIntoContainer(
      null,
      element,
      container,
      false,
      callback,
    );
  }

}

抛开typeScript那些恶心的类型限定不谈，我们发现render的实质就是调用并返回   legacyRenderSubtreeIntoContainer   这个函数执行后的结果，你看这个函数的命名：

legacy : 遗产  +  render: 渲染  +  subtree: 子树  +  into: 到 +  container: 容器

爱几把咋翻译咋翻译，大致意思就是说把 虚拟的dom树渲染到真实的dom容器中。此函数应当荣当 核心函数 宝座

二、legacyRenderSubtreeIntoContainer 又干了啥？

还是撸到丫的源码：

function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>,  // null
  children: ReactNodeList, // element 虚拟dom树  
  container: DOMContainer, // html中的dom根对象
  forceHydrate: boolean, // false 服务器端渲染标识
  callback: ?Function, // 回调函数  没有
) {
  // 对container进行校验
  invariant(
    isValidContainer(container),
    'Target container is not a DOM element.',
  );
  // 取root对象，一般如果非服务器端渲染这个root是不存在的
  let root: Root = (container._reactRootContainer: any);
  // 进入浏览器端渲染流程
  if (!root) {
    //  人工制造root，附加了一堆fiber的东西到_reactRootContainer
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
      container,
      forceHydrate,
    );

    if (typeof callback === 'function') {
      const originalCallback = callback;
      callback = function() {
        // 该变callback的this为 instance
        const instance = DOMRenderer.getPublicRootInstance(root._internalRoot);
        originalCallback.call(instance);
      };
    }
    DOMRenderer.unbatchedUpdates(() => {
      if (parentComponent != null) {
        // 向真实dom中挂载虚拟dom
        root.legacy_renderSubtreeIntoContainer(
          parentComponent,
          children,
          callback,
        );
      } else {
        // 多么直白的语义
        root.render(children, callback);
      }
    });
  } else {
    // 还是先整一下callback
    if (typeof callback === 'function') {
      const originalCallback = callback;
      callback = function() {
        const instance = DOMRenderer.getPublicRootInstance(root._internalRoot);
        originalCallback.call(instance);
      };
    }
    // 还是上面那一套
    if (parentComponent != null) {
      // 向root中挂载dom
      root.legacy_renderSubtreeIntoContainer(
        parentComponent,
        children,
        callback,
      );
    } else {
      root.render(children, callback);
    }
  }
  // 返回container 中的dom
  return DOMRenderer.getPublicRootInstance(root._internalRoot);
}

通过看这个核心函数的代码，发现它其中有3个谜团：

1. _reactRootContainer 的制造：legacyCreateRootFromDOMContainer

   这个函数会制造一个对象挂载到真实的dom根节点上，有了这个对象，执行该对象上的一些方法可以将虚拟dom变成dom树挂载到根节点上

2. DOMRenderer.unbatchedUpdates

   它的回调执行了挂载dom结构的方法

3.  root.legacy_renderSubtreeIntoContainer 和 root.render

   如果有parentComponent 这个东西，就执行root.render 否则 root.legacy_renderSubtreeIntoContainer

三、跟进谜团

1.root的制造

找到 legacyCreateRootFromDOMContainer 函数：

function legacyCreateRootFromDOMContainer(
  container: DOMContainer,
  forceHydrate: boolean, // false
): Root {
  const shouldHydrate =
    forceHydrate || shouldHydrateDueToLegacyHeuristic(container);
  // 是否需要服务器端渲染
  if (!shouldHydrate) {
    let warned = false;
    let rootSibling;
    while ((rootSibling = container.lastChild)) {
      if (__DEV__) {
        ...
      }
      // 将dom根节点清空
      container.removeChild(rootSibling);
    }
  }
  if (__DEV__) {
    ...
  }
  const isAsync = false;
  return new ReactRoot(container, isAsync, shouldHydrate);
}

我们发现实际上该函数做的只是在非ssr的情况下，将dom根节点清空，然后返回一个new ReactRoot(...)

那么重点又跑到了ReactRoot中：

// 构造函数
function ReactRoot(
  container: Container,  // 被清空的dom根节点
  isAsync: boolean,  // false
  hydrate: boolean // false
) {
  // 追查之后发现：createFiberRoot(containerInfo, isAsync, hydrate);
  // root 实际上就和fiber有了联系
  const root = DOMRenderer.createContainer(container, isAsync, hydrate);
  this._internalRoot = root;
}


// 原型方法

// 渲染
ReactRoot.prototype.render = function(
  children: ReactNodeList,
  callback: ?() => mixed,
): Work {
  const root = this._internalRoot;
  const work = new ReactWork();
  callback = callback === undefined ? null : callback;
  
  if (callback !== null) {
    work.then(callback);
  }
  DOMRenderer.updateContainer(children, root, null, work._onCommit);
  return work;
};

// 销毁组件
ReactRoot.prototype.unmount = function(callback: ?() => mixed): Work {
    ...
};


ReactRoot.prototype.legacy_renderSubtreeIntoContainer = function(
  parentComponent: ?React$Component<any, any>,
  children: ReactNodeList,
  callback: ?() => mixed,
): Work {
  const root = this._internalRoot;
  const work = new ReactWork();
  callback = callback === undefined ? null : callback;
  if (callback !== null) {
    work.then(callback);
  }
  DOMRenderer.updateContainer(children, root, parentComponent, work._onCommit);
  return work;
};

ReactRoot.prototype.createBatch = function(): Batch {
    .....
};

通过以上代码我们就了解到root到底是个啥玩意儿，这个root有render等方法外，同时还附加了一个和fiber相关的  _internalRoot属性。

由此可知，不管是root.render 还是 root.legacy_renderSubtreeIntoContainer  都会去执行  DOMRenderer.updateContainer方法，无非就是传入的参数时：第三个参数传什么 而已。

2.DOMRenderer.unbatchedUpdates干了什么

// 正在批量更新标识
let isBatchingUpdates: boolean = false;
// 未批量更新标识
let isUnbatchingUpdates: boolean = false;
// 非批量更新操作
function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
  // 如果正在批量更新
  if (isBatchingUpdates && !isUnbatchingUpdates) {
    // 未批量更新设为true
    isUnbatchingUpdates = true;
    try {
      // 运行入参函数且返回执行结果
      return fn(a);
    } finally {
      // 仍旧将未批量更新设为false
      isUnbatchingUpdates = false;
    }
  }
  // 不管是否在批量更新流程中，都执行入参函数
  return fn(a);
}

记住这里两个十分重要的标识：isBatchingUpdates  和  isUnbatchingUpdates    初始值都是false

 由此可知 unbatchedUpdates 无论如何都会执行入参函数，无非在批量更新的时候多一些流程控制。这里留坑

3. root.legacy_renderSubtreeIntoContainer 和 root.render 在弄什么？

通过上面的层层扒皮，无论怎样判断，最终都会到以上两个方法中，而这两个方法的核心就是 DOMRenderer.updateContainer，无非就是传不传父组件而已

传入的参数有： 1：虚拟dom对象树   2：之前造出来的root中和fiber相关的_internalRoot  3.父组件(null 或 父组件)  4.回调函数

export function updateContainer(
  element: ReactNodeList,  // 虚拟dom对象
  container: OpaqueRoot, // 被制造出来的fiber root
  parentComponent: ?React$Component<any, any>, // null
  callback: ?Function, //没传
): ExpirationTime {
  // 还记得虚拟dom对象
  const current = container.current; 
  const currentTime = requestCurrentTime();
  const expirationTime = computeExpirationForFiber(currentTime, current); // 计算优先级
  return updateContainerAtExpirationTime(
    element,
    container,
    parentComponent,
    expirationTime,
    callback,
  );
}
// 剥皮

// 根据渲染优先级更新dom
export function updateContainerAtExpirationTime(
  element: ReactNodeList, // 虚拟dom对象
  container: OpaqueRoot, // 和fiber相关的_internalRoot
  parentComponent: ?React$Component<any, any>, // 可有可无
  expirationTime: ExpirationTime, // 计算出来的渲染优先级
  callback: ?Function, // 回调函数，没有
) {
  const current = container.current;

  if (__DEV__) {
    ...
  }
  // 获取到父组件内容
  const context = getContextForSubtree(parentComponent);
  // 赋值操作，不知道干啥用
  if (container.context === null) {
    container.context = context;
  } else {
    container.pendingContext = context;
  }
  // 又到了下一站：schedule:安排,  Root: 根, Update:更新
  return scheduleRootUpdate(current, element, expirationTime, callback);
}
// 剥皮

// 安排根节点更新
function scheduleRootUpdate(
  current: Fiber, // fiber对象
  element: ReactNodeList, // 虚拟dom树
  expirationTime: ExpirationTime, // 更新优先级
  callback: ?Function, // 回调
) {
  if (__DEV__) {
    ...
  }
  /*
    export const UpdateState = 0;
    export function createUpdate(expirationTime: ExpirationTime): Update<*> {
        return {
          expirationTime: expirationTime,
        
          tag: UpdateState,
          payload: null,
          callback: null,

          next: null,
          nextEffect: null,
        };
    }
  */

  // 返回一个包含以上属性的update对象
  const update = createUpdate(expirationTime);
  // 将虚拟dom树放入payload 
  update.payload = {element};

  callback = callback === undefined ? null : callback;
  if (callback !== null) {
    warningWithoutStack(
      typeof callback === 'function',
      'render(...): Expected the last optional `callback` argument to be a ' +
        'function. Instead received: %s.',
      callback,
    );
    update.callback = callback;
  }
  // 开始加入更新队列了，又得剥皮
  enqueueUpdate(current, update);
  // 
  scheduleWork(current, expirationTime);
  return expirationTime;
}


// 更新队列
// 核心update
export function enqueueUpdate<State>(
  fiber: Fiber, 
  update: Update<State> // 上文那个update对象
) {
  // 根据fiber的指示进行更新
  ...
}

根据一系列的剥皮，最终指向了enqueueUpdate 这个函数，而这个函数和fiber是紧密耦合的，fiber是一个棘手的问题，不理解fiber就无法弄清虚拟dom如何更新到真实dom中。

预知fiber如何，且听后续分晓！！！

四、本次的坑有以下几个：

1. _internalRoot 如何制造出来的，丫有什么作用，为什么后面的函数参数都传它

2. enqueueUpdate 跟fiber的关系还不清不楚

3. expirationTime 是干什么的，它的这个优先级有什么用呢？

下期解答！