摘要：本文將要講解的調(diào)用棧是下面這個(gè)樣子的平臺(tái)無關(guān)相關(guān)如果看源碼，我們會(huì)留意到很多相關(guān)的代碼，我們暫時(shí)先將其忽略，會(huì)在后續(xù)的文章中進(jìn)行講解。現(xiàn)在我們來看一下各實(shí)例間的關(guān)系目前為止的調(diào)用棧平臺(tái)無關(guān)相關(guān)下一篇講解三總結(jié)本文講解了轉(zhuǎn)化為的過程。

歡迎關(guān)注我的公眾號(hào)睿Talk，獲取我最新的文章：

React 是一個(gè)十分龐大的庫，由于要同時(shí)考慮 ReactDom 和 ReactNative ，還有服務(wù)器渲染等，導(dǎo)致其代碼抽象化程度很高，嵌套層級(jí)非常深。閱讀 React 源碼是一個(gè)非常艱辛的過程，在學(xué)習(xí)過程中給我?guī)椭畲蟮木褪沁@個(gè)系列文章。作者對(duì)代碼的調(diào)用關(guān)系梳理得非常清楚，而且還有配圖幫助理解，非常值得一讀。站在巨人的肩膀之上，我嘗試再加入自己的理解，希望對(duì)有志于學(xué)習(xí) React 源碼的讀者帶來一點(diǎn)啟發(fā)。

本系列文章基于 React 15.4.2 ，以下是本系列其它文章的傳送門：
React 源碼深度解讀（一）：首次 DOM 元素渲染 - Part 1
React 源碼深度解讀（二）：首次 DOM 元素渲染 - Part 2
React 源碼深度解讀（三）：首次 DOM 元素渲染 - Part 3
React 源碼深度解讀（四）：首次自定義組件渲染 - Part 1
React 源碼深度解讀（五）：首次自定義組件渲染 - Part 2
React 源碼深度解讀（六）：依賴注入
React 源碼深度解讀（七）：事務(wù) - Part 1
React 源碼深度解讀（八）：事務(wù) - Part 2
React 源碼深度解讀（九）：?jiǎn)蝹€(gè)元素更新
React 源碼深度解讀（十）：Diff 算法詳解

上一篇文章中，介紹了頂層對(duì)象ReactCompositeComponent[T]是如何構(gòu)造的，接下來我們看看 batchedMountComponentIntoNode 做了什么事情。

本文將要講解的調(diào)用棧是下面這個(gè)樣子的：

|=ReactMount.render(nextElement, container, callback)     ___
|=ReactMount._renderSubtreeIntoContainer()                 |
  |-ReactMount._renderNewRootComponent()                   |
    |-instantiateReactComponent()                          |
    |~batchedMountComponentIntoNode()                  upper half
      |~mountComponentIntoNode()                       (平臺(tái)無關(guān))
        |-ReactReconciler.mountComponent()                 |
          |-ReactCompositeComponent.mountComponent()       |
          |-ReactCompositeComponent.performInitialMount()  |
            |-instantiateReactComponent()                 _|_
            |-ReactDOMComponent.mountComponent()       lower half
        |-_mountImageIntoNode()                      (HTML DOM 相關(guān))
                                                          _|_

如果看源碼，我們會(huì)留意到很多transaction相關(guān)的代碼，我們暫時(shí)先將其忽略，會(huì)在后續(xù)的文章中進(jìn)行講解。暫時(shí)可以理解為調(diào)用transaction.perform時(shí)，實(shí)際上就是對(duì)第一個(gè)參數(shù)進(jìn)行函數(shù)調(diào)用。跳過一些模版代碼后，實(shí)際上做事情的是 mountComponentIntoNode 這個(gè)方法。

// 文件位置：src/renderers/dom/client/ReactMount.js

function mountComponentIntoNode(
    wrapperInstance,    // ReactCompositeComponent[T]
    container,          // document.getElementById("root")
    transaction,
    shouldReuseMarkup,
    context
) {
    ...
    
    var markup = ReactReconciler.mountComponent(
        wrapperInstance,
        transaction,
        null,
        ReactDOMContainerInfo(wrapperInstance, container),
        context,
        0 /* parentDebugID */
    );

    ...
    
    ReactMount._mountImageIntoNode(
        markup,
        container,
        wrapperInstance,
        shouldReuseMarkup,
        transaction
    );
}

ReactReconciler.mountComponent 用于創(chuàng)建 DOM 元素，而 ReactMount._mountImageIntoNode 則是將剛創(chuàng)建的 DOM 元素掛載到頁面。ReactReconciler.mountComponent 會(huì)調(diào)用 ReactCompositeComponent[T]的 mountComponent 方法。在看 mountComponent 方法前，還需要先準(zhǔn)備好 hostContainerInfo，由 ReactDOMContainerInfo 生成：

// 文件位置：src/renderers/dom/shared/ReactDOMContainerInfo.js

function ReactDOMContainerInfo(
    topLevelWrapper,     // ReactCompositeComponent[T]
    node                 // document.getElementById("root")
) {
    var info = {
        _topLevelWrapper: topLevelWrapper,
        _idCounter: 1,
        _ownerDocument: node ?
            node.nodeType === DOC_NODE_TYPE ? node : node.ownerDocument : null,
        _node: node,
        _tag: node ? node.nodeName.toLowerCase() : null,
        _namespaceURI: node ? node.namespaceURI : null,
    };
    
    ...
    
    return info;
}

現(xiàn)在各實(shí)例間的關(guān)系是這樣的：

再繼續(xù)看 mountComponent 方法：

// 文件位置：src/renderers/shared/stack/reconciler/ReactCompositeComponent.js

mountComponent: function (
    transaction,
    hostParent,
    hostContainerInfo,
    context
) {
    ...

    // this._currentElement 為ReactElement[2](TopLevelWrapper)
    var publicProps = this._currentElement.props;
    var publicContext = this._processContext(context);

    // TopLevelWrapper
    var Component = this._currentElement.type;

    ...

    // Initialize the public class
    var doConstruct = shouldConstruct(Component);
    
    // 生成TopLevelWrapper 實(shí)例
    var inst = this._constructComponent(
        doConstruct,
        publicProps,
        publicContext,
        updateQueue
    );
    
    ...
    
    this._instance = inst;
    
    ...

    var markup;
    
    ...
    
    markup = this.performInitialMount(renderedElement,
            hostParent, hostContainerInfo, transaction, context

    ...

    return markup;
},

performInitialMount: function (renderedElement, hostParent,
    hostContainerInfo, transaction, context) {
    
    // TopLevelWrapper 實(shí)例
    var inst = this._instance;

    ...
    
    // If not a stateless component, we now render
    if (renderedElement === undefined) {
        // 返回值為 ReactElement[1]
        renderedElement = this._renderValidatedComponent();
    }

    // 返回 ReactNodeTypes.HOST
    var nodeType = ReactNodeTypes.getType(renderedElement);
    
    this._renderedNodeType = nodeType;
    
    // instantiateReactComponent.js
    var child = this._instantiateReactComponent(
        renderedElement,
        nodeType !== ReactNodeTypes.EMPTY /* shouldHaveDebugID */
    );
    this._renderedComponent = child;

    var markup = ReactReconciler.mountComponent(
        child,
        transaction,
        hostParent,
        hostContainerInfo,
        this._processChildContext(context),
        debugID
    );

    ...

    return markup;
},

當(dāng)運(yùn)行到var child = this._instantiateReactComponent時(shí)，就會(huì)調(diào)用上篇文章說到的instantiateReactComponent文件：

// 文件位置：src/renderers/shared/stack/reconciler/instantiateReactComponent.js

function instantiateReactComponent(node, shouldHaveDebugID) {
    var instance;

    ...
    
    } else if (typeof node === "object") {
        ...

        // element.type 為 ‘h1’
        if (typeof element.type === "string") {
            instance = ReactHostComponent.createInternalComponent(element);
        } 

    return instance;
}

ReactDom 會(huì)在執(zhí)行的時(shí)候，執(zhí)行ReactDefaultInjection.inject()將 ReactDOMComponent 注入到 ReactHostComponent 中，ReactHostComponent.createInternalComponent 最終會(huì)調(diào)用 ReactDOMComponent：

// 文件位置：src/renderers/dom/shared/ReactDomComponent.js

function ReactDOMComponent(element) {
    // h1
    var tag = element.type;
    
    validateDangerousTag(tag);
    
    // ReactElement[1]
    this._currentElement = element;
    
    this._tag = tag.toLowerCase();
    this._namespaceURI = null;
    this._renderedChildren = null;
    this._previousStyle = null;
    this._previousStyleCopy = null;
    this._hostNode = null;
    this._hostParent = null;
    this._rootNodeID = 0;
    this._domID = 0;
    this._hostContainerInfo = null;
    this._wrapperState = null;
    this._topLevelWrapper = null;
    this._flags = 0;
}

我們將返回的實(shí)例命名為 ReactDOMComponent[ins]。

ReactReconciler.mountComponent 會(huì)調(diào)用 ReactDomComponent 的 mountComponent 方法，這就會(huì)涉及到 HTML DOM 相關(guān)的內(nèi)容，我們?cè)谙乱黄M(jìn)行講解。

現(xiàn)在我們來看一下各實(shí)例間的關(guān)系：

目前為止的調(diào)用棧：

|=ReactMount.render(nextElement, container, callback)     ___
|=ReactMount._renderSubtreeIntoContainer()                 |
  |-ReactMount._renderNewRootComponent()                   |
    |-instantiateReactComponent()                          |
    |~batchedMountComponentIntoNode()                  upper half
      |~mountComponentIntoNode()                       (平臺(tái)無關(guān))
        |-ReactReconciler.mountComponent()                 |
          |-ReactCompositeComponent.mountComponent()       |
          |-ReactCompositeComponent.performInitialMount()  |
            |-instantiateReactComponent()                 _|_
            |-ReactDOMComponent.mountComponent()       lower half
        |-_mountImageIntoNode()                 (HTML DOM 相關(guān)下一篇講解)
                                                          _|_

本文講解了 ReactCompositeComponent[T] 轉(zhuǎn)化為 ReactDomComponent 的過程。代碼一層一層嵌套遞歸執(zhí)行，最終的目的是解析Virtual Dom對(duì)象，將其轉(zhuǎn)換為 HTML。本文講解的大部分代碼是跟平臺(tái)無關(guān)的，也就是 ReactDOM 和 ReactNative 共享的。生成 HTML 的任務(wù)是由 ReactDomComponent 負(fù)責(zé)的，將在下一篇文章講解。