摘要：在學(xué)習(xí)源碼的過(guò)程中，給我?guī)椭畲蟮木褪沁@個(gè)系列文章，于是決定基于這個(gè)系列文章談一下自己的理解。到此為止，首次渲染就完成啦總結(jié)從啟動(dòng)到元素渲染到頁(yè)面，并不像看起來(lái)這么簡(jiǎn)單，中間經(jīng)歷了復(fù)雜的層級(jí)調(diào)用。

前言

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 源碼深度解讀（六）：依賴注入
React 源碼深度解讀（七）：事務(wù) - Part 1
React 源碼深度解讀（八）：事務(wù) - Part 2
React 源碼深度解讀（九）：?jiǎn)蝹€(gè)元素更新
React 源碼深度解讀（十）：Diff 算法詳解

正文

上一篇講解了平臺(tái)無(wú)關(guān)的代碼，這篇繼續(xù)來(lái)講針對(duì)與 HTML DOM 操作的代碼。

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

先來(lái)看看 ReactDOMComponent.mountComponent 做了什么：

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

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

    var mountImage;
    
    var ownerDocument = hostContainerInfo._ownerDocument;
    var el;
    
    // document.createElement 創(chuàng)建 h1 元素
    el = ownerDocument.createElement(this._currentElement
                .type, props.is);

    ...
  
    // 創(chuàng)建 component 與 DOM 的雙向鏈接
    // ReactDOMComponent[ins]._hostNode 指向 DOM
    // DOM 的 __reactInternalInstance 指向 component
    ReactDOMComponentTree.precacheNode(this, el);
    
    // 設(shè)置屬性
    this._updateDOMProperties(null, props, transaction);
    
    var lazyTree = DOMLazyTree(el);
    
    // 循環(huán)創(chuàng)建子元素
    this._createInitialChildren(transaction, props, context,
        lazyTree);
        
    mountImage = lazyTree;

    ...

    return mountImage;
},

到此為止，實(shí)例間的關(guān)系是這樣的：

DOM 元素創(chuàng)建完成后，剩下的就是將其掛載到 container 上面去了。這里調(diào)用的是 ReactMount 的 _mountImageIntoNode：

|=ReactMount.render(nextElement, container, callback)     ___
|=ReactMount._renderSubtreeIntoContainer()                 |
  |-ReactMount._renderNewRootComponent()                   |
    |-instantiateReactComponent()                          |
    |~batchedMountComponentIntoNode()                  upper half
      |~mountComponentIntoNode(                        (平臺(tái)無(wú)關(guān))
          wrapperInstance, // scr: -> not of interest now  |
          container,   // scr: --> document.getElementById(‘root’)
          transaction, // scr: --> not of interest         |
          shouldReuseMarkup, // scr: -------> null         |
          context,           // scr: -------> not of interest
        )                                                  |
        |-ReactReconciler.mountComponent()                 |
          |-ReactCompositeComponent.mountComponent()       |
          |-ReactCompositeComponent.performInitialMount()  |
            |-instantiateReactComponent()                 _|_
            |-ReactDOMComponent.mountComponent()           |
       /* we are here */                               lower half
        |-_mountImageIntoNode()                      (HTML DOM 相關(guān))
            markup,    // scr: --> DOMLazyTree[ins]        |
            container, // scr: --> document.getElementById(‘root’)
            wrapperInstance, // scr:----> same             |
            shouldReuseMarkup, // scr:--> same             |
            transaction, // scr: -------> same             |
          )    

具體實(shí)現(xiàn)：

_mountImageIntoNode: function (
        markup,        // DOMLazyTree[ins] 
        container,     // document.getElementById(‘root’)
        instance,
        shouldReuseMarkup,
        transaction
    ) {
        ...
        
        while (container.lastChild) {
            container.removeChild(container.lastChild);
        }
        
        DOMLazyTree.insertTreeBefore(container, markup, null);

        ...
    }

DOMLazyTree.insertTreeBefore 最終會(huì)調(diào)用 parentNode.insertBefore，將元素掛載到 container 上。到此為止，首次渲染就完成啦！

總結(jié)

從 React 啟動(dòng)到元素渲染到頁(yè)面，并不像看起來(lái)這么簡(jiǎn)單，中間經(jīng)歷了復(fù)雜的層級(jí)調(diào)用。原文的這張圖總結(jié)得非常好：