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 是干什么的，它的这个优先级有什么用呢？

下期解答！