ReactDOM.render源碼解析-1

_Zhao 發(fā)布于2019-08-23 16:55 / 997人閱讀

摘要：本文將對源碼做一個初步解析。首先在方法中校驗參數(shù)是否合法，然后調(diào)用在中，調(diào)用拿到了的一個實例，調(diào)用拿到了，用于注入到，和作為返回值，調(diào)用開始調(diào)度過程在中，首先清理了中的所有子節(jié)點，然后了一個并返回是如何調(diào)度的是一個什么樣的類的操作是在哪里

初步看了react-dom這個包的一些源碼，發(fā)現(xiàn)其比react包要復(fù)雜得多，react包中基本不存在跨包調(diào)用的情況，他所做的也僅僅是定義了ReactElement對象，封裝了對ReactElement的基本操作，而react-dom包存在復(fù)雜的函數(shù)調(diào)用。本文將對ReactDOM.render源碼做一個初步解析。
文章中如有不當(dāng)之處，歡迎交流指點。react版本16.8.2。在源碼添加的注釋在githubreact-source-learn。

前言

使用react時常常寫類似下面的代碼：

import ReactDOM from "react-dom";

ReactDOM.render(
  Hello, world!,
  document.getElementById("root")
);

代碼1

這里導(dǎo)入的ReactDOM就是packages/react-dom/client/ReactDOM.js中所導(dǎo)出的對象。從文檔可見ReactDOM對象有如下幾個方法:(ps:從源碼看其實還有很多其他方法)

render()

hydrate()

unmountComponentAtNode()

findDOMNode()

createPortal()

本文只介紹render()方法

代碼分析

render方法定義如下:

   render(
    element: React$Element,
    container: DOMContainer,
    callback: ?Function,
  ) {
    invariant(
      // 1
      isValidContainer(container),
      "Target container is not a DOM element.",
    );
    if (__DEV__) {
      warningWithoutStack(
        !container._reactHasBeenPassedToCreateRootDEV,
        "You are calling ReactDOM.render() on a container that was previously " +
          "passed to ReactDOM.%s(). This is not supported. " +
          "Did you mean to call root.render(element)?",
        enableStableConcurrentModeAPIs ? "createRoot" : "unstable_createRoot",
      );
    }
    // 2
    return legacyRenderSubtreeIntoContainer(
      null,
      element,
      container,
      false,
      callback,
    );
  },

代碼2

render方法接收兩個必選參數(shù)可一個可選參數(shù)，結(jié)合代碼1的調(diào)用可知，element是一個ReactElement對象， container是一個dom節(jié)點，callback在上面的代碼1并沒有指定，他是一個可選函數(shù)。

這個render方法做的事情比較簡單，一是校驗container參數(shù)，二是調(diào)用legacyRenderSubtreeIntoContainer方法并返回。

接下來是legacyRenderSubtreeIntoContainer

// 刪除了第一次調(diào)ReactDOM.render不會走的分支
function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component, // ReactDOM.render 是null
  children: ReactNodeList, // 是一個ReactElement , ReactDOM.render是第一個參數(shù)
  container: DOMContainer, // 是一個dom節(jié)點, ReactDOM.render是第二個參數(shù)
  forceHydrate: boolean, // ReactDOM.render 是false
  callback: ?Function, // ReactDOM.render 是 第三個參數(shù)
) {
  if (__DEV__) {
    topLevelUpdateWarnings(container);
  }

  // TODO: Without `any` type, Flow says "Property cannot be accessed on any
  // member of intersection type." Whyyyyyy.
  // 根據(jù)type知道, Root type是個對象,包含
  // render方法
  // unmount方法
  // legacy_renderSubtreeIntoContainer 方法
  // createBatch 方法
  // _internalRoot屬性
  let root: Root = (container._reactRootContainer: any);
  if (!root) { // ReactDOM.render調(diào)用時走這里
      // Initial mount
      // 調(diào)用 legacyCreateRootFromDOMContainer 拿 Root
      root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
      container,
      forceHydrate, // ReactDOM.render是false
    );

    // 在callback加參數(shù)
    if (typeof callback === "function") {
      const originalCallback = callback;
      callback = function() {
        const instance = getPublicRootInstance(root._internalRoot);
        originalCallback.call(instance);
      };
    }
    // Initial mount should not be batched.
    // 這個是packages/react-reconciler/ReactFiberScheduler.js中的方法
    // TOLEARN: 這個里邊應(yīng)該是一些調(diào)度過程, 后續(xù)再看
    unbatchedUpdates(() => {
      if (parentComponent != null) {
        root.legacy_renderSubtreeIntoContainer(
          parentComponent,
          children,
          callback,
        );
      } else { // ReactDOM.render方法走這里
        // 這里的root.render 返回的是一個叫Work的東西, TOLEARN,這個Work后面再做了解
        root.render(children, callback);
      }
    });
  }
  // getPublicRootInstance是/packages/react-reconciler/ReactFiberReconciler.js中的方法
  // 關(guān)于他是返回的一個什么東西, 后面再看, 總之他是我ReactDOM.render方法回調(diào)函數(shù)的一個參數(shù),
  // 也是返回值
  return getPublicRootInstance(root._internalRoot);
}

legacyRenderSubtreeIntoContainer在第一次render時做了如下事情：

調(diào)用legacyCreateRootFromDOMContainer拿到一個ReactRoot的實例

在callback中注入一個參數(shù)instance

調(diào)用unbatchedUpdates開始一輪調(diào)度過程，這個是猜的

返回instance

關(guān)于instance的獲取是調(diào)用的getPublicRootInstance，getPublicRootInstance是/packages/react-reconciler/ReactFiberReconciler.js中的方法，后面再研究

關(guān)于unbatchedUpdates, 這個東西是這個是packages/react-reconciler/ReactFiberScheduler.js中的方法，簡單看了看還沒太明白

接下來看一下ReactRoot實例的獲取

// 刪除了__DEV__分支的代碼
// 若需要清理container的子節(jié)點,清理, 然后new ReactRoot并返回
function legacyCreateRootFromDOMContainer(
  container: DOMContainer,  // dom節(jié)點
  forceHydrate: boolean, // false render
): Root {
  // 是否不需要清理container的子元素, 第一次render是false, 即需要清理
  const shouldHydrate =
    forceHydrate || shouldHydrateDueToLegacyHeuristic(container); // 第一次調(diào)用時為false
  // First clear any existing content.
  if (!shouldHydrate) { // 第一次render走這里
    let warned = false;
    let rootSibling;
    // 這里將container的子元素都清理掉了
    while ((rootSibling = container.lastChild)) {
      container.removeChild(rootSibling);
    }
  }
  // Legacy roots are not async by default.
  const isConcurrent = false;
  return new ReactRoot(container, isConcurrent, shouldHydrate);
}

這個方法比較簡單，在第一次調(diào)用ReactDOM.render時，shouldHydrate會是false，所以會走到if (!shouldHydrate) 分支里，將container節(jié)點的所有子節(jié)點都清理掉，最后是new 了一個ReactRoot作為返回值，關(guān)于ReactRoot等內(nèi)容將放到后面的文章分析。

小結(jié)

以上是ReactDOM.render的函數(shù)調(diào)用示意圖。

首先在render方法中校驗container參數(shù)是否合法，然后調(diào)用legacyRenderSubtreeIntoContainer

在legacyRenderSubtreeIntoContainer中，調(diào)用legacyCreateRootFromDOMContainer拿到了ReactRoot的一個實例，調(diào)用getPublicRootInstance拿到了instance，用于注入到callback，和作為返回值，調(diào)用unbatchedUpdates開始調(diào)度過程

在legacyCreateRootFromDOMContainer中，首先清理了container中的所有子節(jié)點，然后new了一個ReactRoot并返回

TODO

unbatchedUpdates是如何調(diào)度的

ReactRoot是一個什么樣的類

dom的操作是在哪里