摘要：本篇開(kāi)始介紹自定義組件是如何渲染的。組件將自定義組件命名為，結(jié)構(gòu)如下經(jīng)過(guò)編譯后，生成如下代碼構(gòu)建頂層包裝組件跟普通元素渲染一樣，第一步先會(huì)執(zhí)行創(chuàng)建為的。調(diào)用順序已在代碼中注釋。先看圖，這部分內(nèi)容將在下回分解

前言

React 是一個(gè)十分龐大的庫(kù)，由于要同時(shí)考慮 ReactDom 和 ReactNative ，還有服務(wù)器渲染等，導(dǎo)致其代碼抽象化程度很高，嵌套層級(jí)非常深，閱讀其源碼是一個(gè)非常艱辛的過(guò)程。在學(xué)習(xí) React 源碼的過(guò)程中，給我?guī)椭畲蟮木褪沁@個(gè)系列文章，于是決定基于這個(gè)系列文章談一下自己的理解。本文會(huì)大量用到原文中的例子，想體會(huì)原汁原味的感覺(jué)，推薦閱讀原文。

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

正文

前面三篇文章介紹了 React 是怎么渲染普通DOM元素的，如下圖所示。

紅線(xiàn)部分生成的markup實(shí)際上是一層一層往回傳，為了方便展示就直接跳過(guò)中間層級(jí)返回了。這張圖片跳過(guò)了事務(wù)（transaction）相關(guān)的調(diào)用，后面會(huì)有專(zhuān)門(mén)的文章介紹。

本篇開(kāi)始介紹自定義組件是如何渲染的。

App 組件

將自定義組件命名為App，結(jié)構(gòu)如下：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      desc: "start",
    };
  }

  render() {
    return (
      

        

          
          
 "Welcom to React" 
        
        

          { this.state.desc }
        
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById(‘root’)
);

App 經(jīng)過(guò) Babel 編譯后，生成如下代碼：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      desc: "start",
    };
  }

  render() {
    return React.createElement(
      "div",
      { className: "App" },
      React.createElement(
        "div",
        { className: "App-header" },
        React.createElement(
          "img",
          { src: "main.jpg", className: "App-logo", alt: "logo" }
        ),
        React.createElement(
          "h1",
          null,
          " "Welcom to React" "
        )
      ),
      React.createElement(
        "p",
        { className: "App-intro" },
        this.state.desc
      )
    );
  }
}

ReactDOM.render(
  React.createElement(App, null),
  document.getElementById(‘root’)
);

構(gòu)建頂層包裝組件ReactCompositeComponent[T]

跟普通DOM元素渲染一樣，第一步先會(huì)執(zhí)行React.createElement創(chuàng)建 type 為 App 的 ReactElement[1]。

然后在 _renderSubtreeIntoContainer 里面創(chuàng)建 type 為 TopLevelWrapper 的 ReactElement[2]。

通過(guò)instantiateReactComponent創(chuàng)建包裝元素 ReactCompositeComponent[T]。

調(diào)用關(guān)系如下圖所示：

初始化ReactCompositeComponent[T]

在下一步mountComponentIntoNode時(shí)，ReactDOMContainerInfo[ins]會(huì)被創(chuàng)建并傳給ReactReconciler。

ReactReconciler會(huì)調(diào)用ReactCompositeComponent[T]的 mountComponent 創(chuàng)建 TopLevelWrapper 實(shí)例。

然后就是 performInitialMount 根據(jù) ReactElement 的類(lèi)型來(lái)創(chuàng)建不同的對(duì)象。在渲染普通 DOM 元素的時(shí)候，這部會(huì)返回 ReactDOMComponent。但渲染自定義組件的時(shí)候，就不一樣了。

渲染普通 DOM 元素的調(diào)用關(guān)系如下圖所示，自定義組件的渲染調(diào)用關(guān)系見(jiàn)下文：

使用 App 創(chuàng)建ReactCompositeComponent[ins]

在 performInitialMount 這步，renderedElement 就是 ReactElement[1]：

performInitialMount: function (renderedElement, hostParent,
    hostContainerInfo, transaction, context) {
    ...
    
    // 這里會(huì)調(diào)用 TopLevelWrapper 實(shí)例的 render 方法，得到 ReactElement[1]
    if (renderedElement === undefined) {
        renderedElement = this._renderValidatedComponent();
    }

    ...
    
    // 返回 ReactCompositeComponent[ins]
    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;
},

這步與第二篇的 performInitialMount 很相似，唯一區(qū)別就是渲染普通 DOM 元素返回的是ReactDOMComponent，而渲染自定義組件返回的是包裝好的自定義組件ReactCompositeComponent[ins]。

調(diào)用關(guān)系如下圖所示：

初始化ReactCompositeComponent[ins]

在 performInitialMount 的后半部分，ReactReconciler.mountComponent 實(shí)際上會(huì)調(diào)用 ReactCompositeComponent[ins] 的 mountComponent。這里的關(guān)鍵代碼是

...

// 創(chuàng)建 App 組件的實(shí)例
var inst = this._constructComponent(
    doConstruct,
    publicProps,
    publicContext,
    updateQueue
);

...

經(jīng)過(guò)這步后，ReactCompositeComponent[ins]._instance 等于 App[ins]。像之前一樣，mountComponent 又會(huì)調(diào)用自身的 performInitialMount：

performInitialMount: function (renderedElement, hostParent,
    hostContainerInfo, transaction, context) {
    ...
    
    // 這里會(huì)調(diào)用 App 實(shí)例的 render 方法，而 render 的返回值是 React.createElement 的嵌套調(diào)用。
    if (renderedElement === undefined) {
        renderedElement = this._renderValidatedComponent();
    }

    ...
    
    // 返回 ReactDOMComponent[6]
    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;
},

React.createElement 的嵌套調(diào)用是指：

render() {
    return React.createElement(           // scr: -----------> 5)
      "div",
      { className: "App" },
      React.createElement(                // scr: -----------> 3)
        "div",
        { className: "App-header" },
        React.createElement(              // scr: -----------> 1)
          "img",
          { src: "main.jpg", className: "App-logo", alt: "logo" }
        ),
        React.createElement(              // scr: -----------> 2)
          "h1",
          null,
          " "Welcom to React" "
        )
      ),
      React.createElement(                // scr: -----------> 4)
        "p",
        { className: "App-intro" },
        this.state.desc
      )
    );
  }

這里 React.createElement 的調(diào)用順序是先調(diào)用作為參數(shù)的 children，再調(diào)用父級(jí)。調(diào)用順序已在代碼中注釋。

接下來(lái)的 _instantiateReactComponent 會(huì)返回ReactDOMComponent，就觸及到真正的 DOM 操作了。先看圖，這部分內(nèi)容將在下回分解～