React元件：為什麼呼叫順序是constructor -> willMount -> render -> DidMount

lubyxu發表於2019-03-04
React元件Struct

雖然常用React、redux編寫SPA，但是這一塊是如何運作，應該如何優化，還是比較困擾，最近開始閱讀程墨的《深入淺出React和Redux》，結合之前讀過的React原始碼和相關原始碼的文章後，打算從原始碼的角度，解釋下書中的一些內容。

前言

書中有一段話，關於元件從初始化到掛載經過的宣告週期：
流程：

  • 1、constructor
  • 2、componentWillMount
  • 3、render
  • 4、componentDidMount
    從流程上來看，發現了以前我的想當然錯了！就是render是在componentDidMount之前呼叫的！！怪不得！每次在componentDidMount裡呼叫非同步的時候，render裡面的object.xxx從報錯！原來在componentDidMount之前，已經render過一次，而這個是後object是個null。
    那麼現在，我們從React原始碼上來看看，為什麼是這樣一個順序

1、babel編譯

很簡單的一串程式碼，如下：

class R extends Component {
  constructor(props) {
    super(props);
    console.log(`constructor`);
    this.state = {value: props.value}
  }
  componentWillMount() {
    console.log(`will mount`);
  }
  componentDidMount() {
    console.log(`did mount`);
  }
  render() {
    console.log(`render`);
    return (<div>{this.state.value}</div>);
  }
}複製程式碼

當然，瀏覽器暫時還是沒法識別ES6的語法的，所以需要通過babel編譯。經過babel編譯後如下：

var R = function (_Component) {
  _inherits(R, _Component);

  function R(props) {
    _classCallCheck(this, R);

    var _this = _possibleConstructorReturn(this, (R.__proto__ || Object.getPrototypeOf(R)).call(this, props));

    console.log(`constructor`);
    _this.state = { value: props.value };
    return _this;
  }

  _createClass(R, [{
    key: `componentWillMount`,
    value: function componentWillMount() {
      console.log(`will mount`);
    }
  }, {
    key: `componentDidMount`,
    value: function componentDidMount() {
      console.log(`did mount`);
    }
  }, {
    key: `render`,
    value: function render() {
      console.log(`render`);
      return React.createElement(
        `div`,
        null,
        this.state.value
      );
    }
  }]);

  return R;
}(Component);複製程式碼

從上面來看，其實我比較開心且興奮的看到了閉包和*原型、繼承，不清楚的小夥伴可以github.com/mqyqingfeng… 這篇文章補補。
再來看看constructor，從編譯後的程式碼來看constructor並不是React原型的某個方法，而是babel轉譯後的這個下面的這塊函式。

function R(props) {
    _classCallCheck(this, R);

    var _this = _possibleConstructorReturn(this, (R.__proto__ || Object.getPrototypeOf(R)).call(this, props));

    console.log(`constructor`);
    _this.state = { value: props.value };
    return _this;
}複製程式碼

根據上面複習的原型、繼承， 這是個建構函式。super對應的是_possibleConstructorReturn.

這樣，我們就明白了，為什麼首先會呼叫constructor了：constructor並不是React元件的原型函式，而是babel編譯後的一個建構函式。所以當例項化元件的時候，自然會先呼叫ES6中的constructor了。

2、consturcotr之後的順序

元件是如何插入到DOM中呢？先看看ES程式碼：

ReactDOM.render(
    <R />,
    document.getElementById(`example`)
);複製程式碼

呼叫的是ReactDOM.render追蹤原始碼，實際呼叫的是ReactMount.render。一層層追蹤後如下圖所示：

圖1：函式呼叫流程
圖1：函式呼叫流程

圖片中黃色數字標識：步驟順序。藍色框表示裡面剩下的步驟都是在performInitialMount完成的。
步驟按深度優先方式看。

從圖中，我們能看到React元件週期，最早開始與performInitialMount這個函式裡。其次是render函式，當執行完performInitialMount後，跳出環境棧，接著執行componentDidMount函式。

因此：最後的順序是constructor -> componentWillMount -> render -> componentDidMount

3、論證書中的兩句話。

書中還提到一句話：

  • render函式並不做實際的渲染動作，他只是返回一個JSX描述的結構。
  • render函式被呼叫完之後，componentDidMount函式並不是會被立刻呼叫。componentDidMount被呼叫的時候，render函式返回的東西已經引發了渲染，元件已經被『裝載』到了DOM樹上

3.1 第一句話

最直觀的從console.log來看

render返回的結構
render返回的結構

這麼一看。好吧，這是一個ReactElement。原來render返回的jsx的結構就是個ReactElement。其實，從babel那翻譯過來的js也能看出，render返回的是一個ReactElement

{
    key: `render`,
    value: function render() {
      console.log(`render`);
      return React.createElement(
        `div`,
        null,
        this.state.value
  );
}複製程式碼

3.2 第二句話

想要解釋第二句話，我們得更加仔細的分析原始碼：

class R extends Component {
  constructor(props) {
    super(props);
    console.log(`constructor`);
    this.state = {value: props.value}
  }
  componentWillMount() {
    console.log(`will mount`);
  }
  componentDidMount() {
    console.log(`did mount`);
  }
  render() {
    console.log(`render`);
    return (<div>{this.state.value}</div>);
  }
}
ReactDOM.render(
    <R />,
    document.getElementById(`example`)
);複製程式碼

首先，React會在R上面再包裹一層，叫做_topLevelWrapper的層，這個物件建立出來的是一個ReactCompositeComponentWrapper物件，他基於ReactCompositeComponent,如下：

var ReactCompositeComponentWrapper = function (element) {
  this.construct(element);
};
_assign(ReactCompositeComponentWrapper.prototype, ReactCompositeComponent.Mixin, {
  _instantiateReactComponent: instantiateReactComponent
});複製程式碼

給instantiateReactComponent打日誌，得到如下：

最外層元件instantiateReactComponent物件
最外層元件instantiateReactComponent物件

最外層元件的TopLevelWrapper是個null，_renderedComponent是元件R，在下一步：

R instantiateReactComponent 的物件
R instantiateReactComponent 的物件

第二個是列印出來的R元件對應的ReactComponent物件，圖中能看到這個元件的下一個元件是ReactDOMComponent。最後的列印出來的如下：

ReactDOMComponent元件
ReactDOMComponent元件

在圖1上稍微完善了下，另外一個維度的大致呼叫流程如下圖：

圖2：函式呼叫流程
圖2：函式呼叫流程

為什麼說大致呼叫流程圖，因為，因為在this.performInitialMount函式裡有一個遞迴的過程。然後React元件除了ReactCompositeComponent類之外，還有上面提到的ReactDOMComponent、ReactEmptyComponent和另外一個內部類（這個類筆者不知道）。而圖中，我們只是畫了一個ReactCompositeComponent。

接下來，我們就說說這個的呼叫流程把：
ReactMount內部的呼叫方式，圖上自認為畫的已經是相當清楚了，所以這裡不做詳細說明。
從圖中第3.1步驟開始說起：
1、在ReactMount中的mountComponentIntoNode裡，呼叫了ReactReconciler.mountComponent方法，方法中的wrapperInstance這個時候，是ReactCompositeComponentWrapper物件。返回一個markup（暫時不說）。那我們看看ReactReconciler.mountComponent這個方法是什麼。
2、在ReactReconciler.mountComponent方法中，呼叫了是internalInstance.mountComponent方法，也就是說我們呼叫了『第1步』中的ReactCompositeComponentWrapper物件的mountComponent方法，那我們再去ReactCompositeComponentWrapper.mountComponent看看。
3、ReactCompositeComponent筆者理解為是一個組合元件，什麼是組合元件呢，自認為就是把ReactDOMComponent、ReactEmptyComponent這兩種包含到一起的元件。。。扯遠了，看看ReactCompositeComponent.mountComponent做了什麼把。他呼叫了一個performInitialMount方法。
4、那performInitialMount方法幹了個啥？？？進去一看！重點來了！！他先看看元件有沒有componentWillMount呀~有的話就呼叫。然後跳進_renderValidatedComponent這個函式中去了！。好吧，那我們就去_renderValidatedComponent這個函式中看看。
5、一看發現，_renderValidatedComponent這個函式又呼叫了_renderValidatedComponentWithoutOwnerOrContext方法。
6、那就進去看看把，一看便知，_renderValidatedComponentWithoutOwnerOrContext呼叫了元件的render方法。var renderedComponent = inst.render();，一看，render有個返回值！！！那這個返回值是什麼呢！！！打出來一看，圖3、4：

圖3：TopLevelWrapper的render結構
圖3：TopLevelWrapper的render結構
圖4：R的render結構
圖4：R的render結構

好吧，這有驗證了第三節開頭說的第一句話

render函式並不做實際的渲染動作，他只是返回一個JSX描述的結構（ReactElement）

7、帶著這個ReactElement結構，我們跳出了_renderValidatedComponentWithoutOwnerOrContext函式，返回了『第5步』後，在_renderValidatedComponent中，繼續返回了這個結構，返回到了第4步中的方法performInitialMount中，執行到_renderValidatedComponent之後。執行下面一句話：

this._renderedComponent = this._instantiateReactComponent(renderedElement);複製程式碼

8、看過程式碼的人，很清楚了_instantiateReactComponent這個函式的主要作用就是根據不同ReactElement，返回不同型別的ReactComponent。接下來呢，在performInitialMount又執行了

ReactReconciler.mountComponent(this._renderedComponent, .......);複製程式碼

好了，我們又開始了『第二步』的流程。但是注意，這個時候，還是在當前這個元件的函式棧中。
9、假設，我們renderedElement返回結構是圖4的結構，這個時候的this._renderedComponent那就是ReactDOMComponent物件。那這時，ReactReconciler.mountComponent裡就會呼叫ReactDOMComponent.mountComponent
10、ReactDOMComponent.mountComponent返回的是一個圖5結構的一樣的東東（後面會叫他markup）。

圖5：markup
圖5：markup

瞅著樣子，感覺就是和ReactElement和ReactCompositeComponent就是不一樣，感覺親切多了！！廢話少說！

11、既然『第10步』的ReactDOMComponent.mountComponent呼叫完了，我們就返回到『第9步』performInitialMount裡，一看！執行完了，返回就是圖5的markup。那麼，這個函式出棧，回到『第3步』。

12、ReactCompositeComponent裡執行完performInitialMount之後，就會呼叫componentDidMount，看看他有沒有componentDidMount這個函式。如果有的話，就會執行

transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);複製程式碼

（通篇來看，這個呼叫的頻率還是挺高的，具體做什麼，以後再說）

13、ReactCompositeComponent.mountComponent之後，ReactCompositeComponent.mountComponent函式出棧，回到『第一步』：mountComponentIntoNode。返回markup，之後。呼叫React._mountImageIntoNode函式。這個函式裡，匆匆掃了一下關鍵字：發現，就是將『圖5』的markup結構，轉化成了對應的html結構。裡面有一個筆者認為的這麼說的點睛之筆是setInnerHTML。

綜上所屬：
我們可以得出的結論是：

  • constructor -> componentWillMount -> render -> componentDidMount
  • render函式返回的是一個jsx的ReactElement結構。

至於第三個：

render函式被呼叫完之後，componentDidMount函式並不是會被立刻呼叫。componentDidMount被呼叫的時候，render函式返回的東西已經引發了渲染，元件已經被『裝載』到了DOM樹上。

筆者還得看看~~ 不過相信，這句話肯定是對的！要不然，怎麼會出書，要不然為什麼叫做componentDidMount，函式字面意思，就是render之後，先插入DOM，再呼叫componentDidMount函式。看來，關鍵的地方在transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);這句上。
這也是接下來需要研究的。

限於文章不能寫太長。先暫時這樣，丟擲幾個待討論的點，省的忘記。

  • 1、ReactComponent群都是先render完之後， 統一做的componentDidMount
  • 2、 就是上面的，為什麼是先render -> DOM -> componentDidMount

最後

感覺很多話說的很重複，但是筆者就是想從不同角度說地更仔細點。文章栗子有限，說的只是大概。如有說不明白的或者說錯的地方，麻煩指出。因為，筆者是一個熱愛學習，追求進步的北京打工的外地人！！！！！！

相關文章