React源碼剖析系列－生命周期的管理藝術 - twobin－IT工程師數位筆記本

文章出處

目前，前端領域中 React 勢頭正盛，很少能夠深入剖析內部實現機制和原理。本系列文章希望通過剖析 React 源碼，理解其內部的實現原理，知其然更要知其所以然。

對于 React，其組件生命周期（Component Lifecycle）是它的核心概念，本文從源碼入手，來剖析 React 生命周期的管理藝術。

閱讀本文需要對 React 有一定的了解，如果你不知何為組件的生命周期，請詳讀 React 生命周期的文檔。
如果你對 React 組件的生命周期存在些許疑惑，如生命周期如何順序管理；setState 如何實現異步操作，又是何時真正更新等，那么本文值得閱讀。

前言

React 的主要思想是通過構建可復用組件來構建用戶界面。所謂組件其實就是有限狀態機，通過狀態渲染對應的界面，且每個組件都有自己的生命周期，它規定了組件的狀態和方法需要在哪個階段進行改變和執行。

有限狀態機（FSM），表示有限個狀態以及在這些狀態之間的轉移和動作等行為的模型。一般通過狀態、事件、轉換和動作來描述有限狀態機，下面是描述組合鎖狀態機的模型圖，包括5個狀態、5個狀態自轉換、6個狀態間轉換和1個復位 RESET 轉換到狀態 S1。狀態機，能夠記住目前所處的狀態，根據當前的狀態可以做出相應的決策，并且在進入不同的狀態時，可以做不同的操作。通過狀態機將復雜的關系簡單化，利用這種自然而直觀的方式可以讓代碼更容易理解。

狀態機模型

React 正是利用這一概念，通過管理狀態來實現對組件的管理。例如，某個組件有顯示和隱藏兩個狀態，通常會設計兩個方法 show() 和 hide() 來實現切換；而 React 只需要設置狀態setState({ showed: true/false }) 即可實現。同時，React 還引入了組件的生命周期概念。通過它就可以實現組件的狀態機控制，從而達到 “生命周期－狀態－組件” 的和諧畫面。

雖然組件、狀態機、生命周期這三者都不是 React 獨創，如果熟悉 Web Components 標準，它與其中的自定義組件的生命周期的概念相似。但就目前而言，React 是將這三種概念結合地相對清晰流暢的界面庫。

初探 React 生命周期

在自定義 React 組件時，根據需要會在組件生命周期的不同階段實現不同的邏輯。為了查看組件生命周期的執行順序，你可以使用 react-lifecycle mixin，將此 mixin 添加到需要觀察的組件中，當任何生命周期方法被調用時，都能在控制臺觀察到對應的生命周期的調用時狀態。

// react-lifecycle mixin
import React from 'react';
import ReactDom from 'react-dom';
import LifeCycle from 'react-lifecycle';

const body = document.body;

const MyComponent = React.createClass({
  mixins: [LifeCycle],

  render() {
    console.log('render');
    return null;
  }
});

ReactDom.render(<MyComponent />, body);
ReactDom.unmountComponentAtNode(body);
ReactDom.render(<MyComponent />, body);
ReactDom.render(<MyComponent />, body);

通過反復試驗，得到了組件的生命周期在不同狀態下的執行順序：

當首次裝載組件時，按順序執行 getDefaultProps、getInitialState、componentWillMount、render 和 componentDidMount；
當卸載組件時，執行 componentWillUnmount；
當重新裝載組件時，此時按順序執行 getInitialState、componentWillMount、render 和 componentDidMount，但并不執行 getDefaultProps；
當再次渲染組件時，組件接受到更新狀態，此時按順序執行 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render 和 componentDidUpdate。

生命周期執行順序

疑問

為何 React 會按上述順序執行生命周期？
為何 React 多次 render 時，會執行生命周期的不同階段？
為何 getDefaultProps 只執行了1次？

詳解 React 生命周期

自定義組件（ReactCompositeComponent）的生命周期主要通過三種狀態進行管理：MOUNTING、RECEIVE_PROPS、UNMOUNTING，它們負責通知組件當前所處的狀態，應該執行生命周期中的哪個步驟，是否可以更新 state。三個狀態對應三種方法，分別為：mountComponent、updateComponent、unmountComponent，每個方法都提供了兩種處理方法，will 方法在進入狀態之前調用，did 方法在進入狀態之后調用，三種狀態三種方法五種處理方法，此外還提供兩種特殊狀態的處理方法。

mountComponent -> MOUNTING
updateComponent -> RECEIVE_PROPS
unmountComponent -> UNMOUNTING

三個狀態

createClass 創建自定義組件

createClass 創建自定義組件的入口方法，負責管理生命周期中的 getDefaultProps。getDefaultProps 方法只執行一次，這樣所有實例初始化的 props 將會被共享。

通過 createClass 創建自定義組件，利用原型繼承 ReactCompositeComponentBase 父類，按順序合并 mixins，設置初始化 defaultProps，創建元素 ReactElement。

// ReactCompositeComponent 的基類
var ReactCompositeComponentBase = function() {};

// 將 Mixin 合并到 ReactCompositeComponentBase 的原型上
assign(
  ReactCompositeComponentBase.prototype,
  ReactComponent.Mixin,
  ReactOwner.Mixin,
  ReactPropTransferer.Mixin,
  ReactCompositeComponentMixin
);

var ReactCompositeComponent = {
  LifeCycle: CompositeLifeCycle,
  Base: ReactCompositeComponentBase,

  // 創建組件
  createClass: function(spec) {
    // 構造函數
    var Constructor = function(props, context) {
      this.props = props;
      this.context = context;
      this.state = null;
      var initialState = this.getInitialState ? this.getInitialState() : null;
      this.state = initialState;
    };

    // 原型繼承父類
    Constructor.prototype = new ReactCompositeComponentBase();
    Constructor.prototype.constructor = Constructor;

    // 合并 mixins
    injectedMixins.forEach(
      mixSpecIntoComponent.bind(null, Constructor)
    );
    mixSpecIntoComponent(Constructor, spec);

    // mixins 合并后裝載 defaultProps (React整個生命周期中 getDefaultProps 只執行一次)
    if (Constructor.getDefaultProps) {
      Constructor.defaultProps = Constructor.getDefaultProps();
    }

    for (var methodName in ReactCompositeComponentInterface) {
      if (!Constructor.prototype[methodName]) {
        Constructor.prototype[methodName] = null;
      }
    }

    return ReactElement.createFactory(Constructor);
  }
}

狀態一：MOUNTING

mountComponent 負責管理生命周期中的 getInitialState、componentWillMount、render 和 componentDidMount。

由于 getDefaultProps 是通過 Constructor 進行管理，因此也是整個生命周期中最先開始執行，而 mountComponent 只能望洋興嘆，無法調用到 getDefaultProps。這就解釋了為何 getDefaultProps 只執行1次的原因。

由于通過 ReactCompositeComponentBase 返回的是一個虛擬節點，因此需要利用 instantiateReactComponent 去得到實例，再使用 mountComponent 拿到結果作為當前自定義元素的結果。

首先通過 mountComponent 裝載組件，此時，將狀態設置為 MOUNTING，利用 getInitialState 獲取初始化 state，初始化更新隊列。

若存在 componentWillMount，則執行；如果此時在 componentWillMount 中調用 setState，是不會觸發 reRender，而是進行 state 合并。

到此時，已經完成 MOUNTING 的工作，更新狀態為 NULL，同時 state 也將執行更新操作，此刻在 render 中可以獲取更新后的 this.state 數據。

其實，mountComponent 本質上是通過 遞歸渲染 內容的，由于遞歸的特性，父組件的 componentWillMount 一定在其子組件的 componentWillMount 之前調用，而父組件的 componentDidMount 肯定在其子組件的 componentDidMount 之后調用。

當渲染完成之后，若存在 componentDidMount 則觸發。這就解釋了 componentWillMount - render - componentDidMount 三者之間的執行順序。

mountComponent

注意：instantiateReactComponent 通過判斷元素類型（類型包括：object、string、function）創建元素實例，這里不做過多介紹，當講解到 React Virtual DOM 時，再詳細介紹此方法。

// 裝載組件
mountComponent: function(rootID, transaction, mountDepth) {
  // 當前狀態為 MOUNTING
  this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING;

  // 當前元素對應的上下文
  this.context = this._processContext(this._currentElement._context);

  // 當前元素對應的 props
  this.props = this._processProps(this.props);

  // 獲取初始化 state
  this.state = this.getInitialState();

  // 初始化更新隊列
  this._pendingState = null;
  this._pendingForceUpdate = false;

  // componentWillMount 調用setstate，不會觸發rerender而是自動提前合并
  if (this.componentWillMount) {
    this.componentWillMount();
    if (this._pendingState) {
      this.state = this._pendingState;
      this._pendingState = null;
    }
  }

  // 得到 _currentElement 對應的 component 類實例
  this._renderedComponent = instantiateReactComponent(
    this._renderValidatedComponent(),
    this._currentElement.type
  );

  // 完成 MOUNTING，更新 state
  this._compositeLifeCycleState = null;

  // render 遞歸渲染
  var markup = this._renderedComponent.mountComponent(
    rootID,
    transaction,
    mountDepth + 1
  );

  // 如果存在 this.componentDidMount，則渲染完成后觸發
  if (this.componentDidMount) {
    transaction.getReactMountReady().enqueue(this.componentDidMount, this);
  }

  return markup;
}

狀態二：RECEIVE_PROPS

updateComponent 負責管理生命周期中的 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render 和 componentDidUpdate。

首先通過 updateComponent 更新組件，如果前后元素不一致說明需要進行組件更新，此時將狀態設置為 RECEIVING_PROPS。

若存在 componentWillReceiveProps，則執行；如果此時在 componentWillReceiveProps 中調用setState，是不會觸發 reRender，而是進行 state 合并。

到此時，已經完成 RECEIVING_PROPS 工作，更新狀態為 NULL，同時 state 也將執行更新操作，此刻 this.state 可以獲取到更新后的數據。

注意：此時 this.state 雖然獲取到更新數據，但只能在內部源碼中使用，我們在開發時，若在 componentWillReceiveProps 中調用 setState，那么在 componentWillReceiveProps、shouldComponentUpdate 和 componentWillUpdate 中還是無法獲取到更新后的 this.state，即此時訪問的 this.state 仍然是未更新的數據，只有在 render 和 componentDidUpdate 中才能獲取到更新后的 this.state。

調用 shouldComponentUpdate 判斷是否需要進行組件更新，如果存在 componentWillUpdate，則執行。

updateComponent 本質上也是通過 遞歸渲染 內容的，由于遞歸的特性，父組件的 componentWillUpdate 一定在其子組件的 componentWillUpdate 之前調用，而父組件的 componentDidUpdate 肯定在其子組件 componentDidUpdate 之后調用。

當渲染完成之后，若存在 componentDidUpdate，則觸發，這就解釋了 componentWillReceiveProps - componentWillUpdate - render - componentDidUpdate 它們之間的執行順序。

注意：禁止在 shouldComponentUpdate 和 componentWillUpdate 中調用setState，會造成循環調用，直至耗光瀏覽器內存后崩潰。（請繼續閱讀，尋找答案）

updateComponent

// 更新組件
updateComponent: function(transaction, prevParentElement, nextParentElement) {
  var prevContext = this.context;
  var prevProps = this.props;
  var nextContext = prevContext;
  var nextProps = prevProps;

  if (prevParentElement !== nextParentElement) {
    nextContext = this._processContext(nextParentElement._context);
    nextProps = this._processProps(nextParentElement.props);
    // 當前狀態為 RECEIVING_PROPS
    this._compositeLifeCycleState = CompositeLifeCycle.RECEIVING_PROPS;

    // 如果存在 componentWillReceiveProps，則執行
    if (this.componentWillReceiveProps) {
      this.componentWillReceiveProps(nextProps, nextContext);
    }
  }

  // 設置狀態為 null，更新 state
  this._compositeLifeCycleState = null;
  var nextState = this._pendingState || this.state;
  this._pendingState = null;
  var shouldUpdate =
    this._pendingForceUpdate ||
    !this.shouldComponentUpdate ||
    this.shouldComponentUpdate(nextProps, nextState, nextContext);
  if (!shouldUpdate) {
    // 如果確定組件不更新，仍然要設置 props 和 state
    this._currentElement = nextParentElement;
    this.props = nextProps;
    this.state = nextState;
    this.context = nextContext;
    this._owner = nextParentElement._owner;
    return;
  }
  this._pendingForceUpdate = false;

  ......

  // 如果存在 componentWillUpdate，則觸發
  if (this.componentWillUpdate) {
    this.componentWillUpdate(nextProps, nextState, nextContext);
  }

  // render 遞歸渲染
  var nextMarkup = this._renderedComponent.mountComponent(
    thisID,
    transaction,
    this._mountDepth + 1
  );

  // 如果存在 componentDidUpdate，則觸發
  if (this.componentDidUpdate) {
    transaction.getReactMountReady().enqueue(
      this.componentDidUpdate.bind(this, prevProps, prevState, prevContext),
      this
    );
  }
},

狀態三：UNMOUNTING

unmountComponent 負責管理生命周期中的 componentWillUnmount。

首先將狀態設置為 UNMOUNTING，若存在 componentWillUnmount，則執行；如果此時在 componentWillUnmount 中調用 setState，是不會觸發 reRender。更新狀態為 NULL，完成組件卸載操作。

// 卸載組件
unmountComponent: function() {
  // 設置狀態為 UNMOUNTING
  this._compositeLifeCycleState = CompositeLifeCycle.UNMOUNTING;

  // 如果存在 componentWillUnmount，則觸發
  if (this.componentWillUnmount) {
    this.componentWillUnmount();
  }

  // 更新狀態為 null
  this._compositeLifeCycleState = null;
  this._renderedComponent.unmountComponent();
  this._renderedComponent = null;

  ReactComponent.Mixin.unmountComponent.call(this);
}

setState 更新機制

當調用 setState 時，會對 state 以及 _pendingState 更新隊列進行合并操作，但其實真正更新 state 的幕后黑手是 replaceState。

replaceState 會先判斷當前狀態是否為 MOUNTING，如果不是即會調用ReactUpdates.enqueueUpdate 執行更新。

當狀態不為 MOUNTING 或 RECEIVING_PROPS 時，performUpdateIfNecessary 會獲取 _pendingElement、_pendingState、_pendingForceUpdate，并調用 updateComponent 進行組件更新。

如果在 shouldComponentUpdate 或 componentWillUpdate 中調用 setState，此時的狀態已經從 RECEIVING_PROPS -> NULL，則 performUpdateIfNecessary 就會調用 updateComponent 進行組件更新，但 updateComponent 又會調用 shouldComponentUpdate 和 componentWillUpdate，因此造成循環調用，使得瀏覽器內存占滿后崩潰。

循環調用

// 更新 state
setState: function(partialState, callback) {
  // 合并 _pendingState
  this.replaceState(
    assign({}, this._pendingState || this.state, partialState),
    callback
  );
},

// 更新 state
replaceState: function(completeState, callback) {
  validateLifeCycleOnReplaceState(this);

  // 更新隊列
  this._pendingState = completeState;

  // 判斷狀態是否為 MOUNTING，如果不是，即可執行更新
  if (this._compositeLifeCycleState !== CompositeLifeCycle.MOUNTING) {
    ReactUpdates.enqueueUpdate(this, callback);
  }
},

// 如果存在 _pendingElement、_pendingState、_pendingForceUpdate，則更新組件
performUpdateIfNecessary: function(transaction) {
  var compositeLifeCycleState = this._compositeLifeCycleState;

  // 當狀態為 MOUNTING 或 RECEIVING_PROPS時，則不更新
  if (compositeLifeCycleState === CompositeLifeCycle.MOUNTING ||
      compositeLifeCycleState === CompositeLifeCycle.RECEIVING_PROPS) {
    return;
  }

  var prevElement = this._currentElement;
  var nextElement = prevElement;
  if (this._pendingElement != null) {
    nextElement = this._pendingElement;
    this._pendingElement = null;
  }

  // 調用 updateComponent
  this.updateComponent(
    transaction,
    prevElement,
    nextElement
  );
}

總結

React 通過三種狀態：MOUNTING、RECEIVE_PROPS、UNMOUNTING，管理整個生命周期的執行順序；
setState 會先進行 _pendingState 更新隊列的合并操作，不會立刻 reRender，因此是異步操作，且通過判斷狀態（MOUNTING、RECEIVE_PROPS）來控制 reRender 的時機；
不建議在 getDefaultProps、getInitialState、shouldComponentUpdate、componentWillUpdate、render 和 componentWillUnmount 中調用 setState，特別注意：不能在 shouldComponentUpdate 和 componentWillUpdate 中調用 setState，會導致循環調用。

生命周期全局圖

參考資料

如果本文能夠為你解決些許關于 React 生命周期管理的疑惑，請點個贊吧！

注：一群志同道合的小伙伴，分享關于 React, Flux 在實踐中的經驗與想法，同步于知乎上寫的專欄pure render，原作請到，http://zhuanlan.zhihu.com/purerender。

文章列表

不含病毒。www.avast.com

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

E-mail轉寄

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds