2. 程式人生 > >React原始碼分析4 — React生命週期詳解

React原始碼分析4 — React生命週期詳解

阿新 • • 發佈：2019-02-13

1 React生命週期流程

Markdown

呼叫流程可以參看上圖。分為例項化，存在期和銷燬三個不同階段。介紹生命週期流程的文章很多，相信大部分同學也有所瞭解，我們就不詳細分析了。很多同學肯定有疑問，這些方法在React內部是在哪些方法中被呼叫的呢，他們觸發的時機又是什麼時候呢。下面我們來詳細分析。

2 例項化生命週期

getDefaultProps

在React.creatClass()初始化元件類時，會呼叫getDefaultProps()，將返回的預設屬性掛載到defaultProps變數下。這段程式碼之前已經分析過了，參考 React原始碼分析2 — 元件和物件的建立（createClass，createElement）

.

這裡要提的一點是，初始化元件類只執行一次。可以把它簡單類比為Java中的Class物件。初始化元件類就是ClassLoader載入Class物件的過程。類物件的初始化不要錯誤理解成了例項物件的初始化。一個React元件類可能會在JSX中被多次呼叫，產生多個元件物件，但它只有一個類物件，也就是類載入後getDefaultProps就不會再呼叫了。

getInitialState

這個方法在建立元件例項物件的時候被呼叫，具體程式碼位於React.creatClass()的Constructor函式中。之前文章中已經分析了，參考 React原始碼分析2 — 元件和物件的建立（createClass，createElement）

。

每次建立React例項物件時，它都會被呼叫。

mountComponent

componentWillMount，render，componentDidMount都是在mountComponent中被呼叫。在React原始碼分析3 — React元件插入DOM流程一文中，我們講過mountComponent被呼叫的時機。它是在渲染新的ReactComponent中被呼叫的。輸入ReactComponent，返回元件對應的HTML。把這個HTML插入到DOM中，就可以生成元件對應的DOM物件了。所以mountComponent尤其關鍵。

和Java中的多型一樣，不同的React元件的mountComponent實現都有所區別。下面我們來重點分析React自定義元件類，也就是ReactCompositeComponent的mountComponent。

  mountComponent: function (transaction, nativeParent, nativeContainerInfo, context) {
    this._context = context;
    this._mountOrder = nextMountID++;
    this._nativeParent = nativeParent;
    this._nativeContainerInfo = nativeContainerInfo;

    // 做propTypes是否合法的判斷，這個只在開發階段有用
    var publicProps = this._processProps(this._currentElement.props);
    var publicContext = this._processContext(context);

    var Component = this._currentElement.type;

    // 初始化公共類
    var inst = this._constructComponent(publicProps, publicContext);
    var renderedElement;

    // inst或者inst.render為空對應的是stateless元件，也就是無狀態元件
    // 無狀態元件沒有例項物件，它本質上只是一個返回JSX的函式而已。是一種輕量級的React元件
    if (!shouldConstruct(Component) && (inst == null || inst.render == null)) {
      renderedElement = inst;
      warnIfInvalidElement(Component, renderedElement);
      inst = new StatelessComponent(Component);
    }

    // 設定變數
    inst.props = publicProps;
    inst.context = publicContext;
    inst.refs = emptyObject;
    inst.updater = ReactUpdateQueue;
    this._instance = inst;

    // 儲存例項物件的引用到map中，方便以後查詢
    ReactInstanceMap.set(inst, this);

    // 初始化state，佇列等
    var initialState = inst.state;
    if (initialState === undefined) {
      inst.state = initialState = null;
    }
    this._pendingStateQueue = null;
    this._pendingReplaceState = false;
    this._pendingForceUpdate = false;

    var markup;
    if (inst.unstable_handleError) {
      // 掛載時出錯，進行一些錯誤處理，然後performInitialMount，初始化掛載
      markup = this.performInitialMountWithErrorHandling(renderedElement, nativeParent, nativeContainerInfo, transaction, context);
    } else {
      // 初始化掛載
      markup = this.performInitialMount(renderedElement, nativeParent, nativeContainerInfo, transaction, context);
    }

    if (inst.componentDidMount) {
      // 呼叫componentDidMount，以事務的形式
      transaction.getReactMountReady().enqueue(inst.componentDidMount, inst);
    }

    return markup;
  },

mountComponent先做例項物件的props,state等初始化，然後呼叫performInitialMount初始化掛載，完成後呼叫componentDidMount。這個呼叫鏈還是很清晰的。下面我們重點來分析performInitialMountWithErrorHandling和performInitialMount

  performInitialMountWithErrorHandling: function (renderedElement, nativeParent, nativeContainerInfo, transaction, context) {
    var markup;
    var checkpoint = transaction.checkpoint();
    try {
      // 放到try-catch中，如果沒有出錯則呼叫performInitialMount初始化掛載。可見這裡沒有什麼特別的操作，也就是做一些錯誤處理而已
      markup = this.performInitialMount(renderedElement, nativeParent, nativeContainerInfo, transaction, context);
    } catch (e) {
      // handleError，解除安裝元件，然後重新performInitialMount初始化掛載
      transaction.rollback(checkpoint);
      this._instance.unstable_handleError(e);
      if (this._pendingStateQueue) {
        this._instance.state = this._processPendingState(this._instance.props, this._instance.context);
      }
      checkpoint = transaction.checkpoint();

      this._renderedComponent.unmountComponent(true);
      transaction.rollback(checkpoint);

      markup = this.performInitialMount(renderedElement, nativeParent, nativeContainerInfo, transaction, context);
    }
    return markup;
  },

可見performInitialMountWithErrorHandling只是多了一層錯誤處理而已，關鍵還是在performInitialMount中。

  performInitialMount: function (renderedElement, nativeParent, nativeContainerInfo, transaction, context) {
    var inst = this._instance;
    if (inst.componentWillMount) {
      // render前呼叫componentWillMount
      inst.componentWillMount();
      // 將state提前合併，故在componentWillMount中呼叫setState不會觸發重新render，而是做一次state合併。這樣做的目的是減少不必要的重新渲染
      if (this._pendingStateQueue) {
        inst.state = this._processPendingState(inst.props, inst.context);
      }
    }

    // 如果不是stateless，即無狀態元件，則呼叫render，返回ReactElement
    if (renderedElement === undefined) {
      renderedElement = this._renderValidatedComponent();
    }

    // 得到元件型別，如空元件ReactNodeTypes.EMPTY，自定義React元件ReactNodeTypes.COMPOSITE，DOM原生元件ReactNodeTypes.NATIVE
    this._renderedNodeType = ReactNodeTypes.getType(renderedElement);
    // 由ReactElement生成ReactComponent，這個方法在之前講解過。根據不同type建立不同Component物件
    // 參考 http://blog.csdn.net/u013510838/article/details/55669769
    this._renderedComponent = this._instantiateReactComponent(renderedElement);

    // 遞迴渲染，渲染子元件
    var markup = ReactReconciler.mountComponent(this._renderedComponent, transaction, nativeParent, nativeContainerInfo, this._processChildContext(context));

    return markup;
  },

performInitialMount中先呼叫componentWillMount()，再將setState()產生的state改變進行state合併，然後呼叫_renderValidatedComponent()返回ReactElement，它會呼叫render()方法。然後由ReactElement建立ReactComponent。最後進行遞迴渲染。下面來看renderValidatedComponent()

  _renderValidatedComponent: function () {
    var renderedComponent;
    ReactCurrentOwner.current = this;
    try {
      renderedComponent = this._renderValidatedComponentWithoutOwnerOrContext();
    } finally {
      ReactCurrentOwner.current = null;
    }
    !(
    return renderedComponent;
  },

  _renderValidatedComponentWithoutOwnerOrContext: function () {
    var inst = this._instance;
    // 呼叫render方法，得到ReactElement。JSX經過babel轉譯後其實就是createElement()方法。這一點在前面也講解過
    var renderedComponent = inst.render();
    return renderedComponent;
  },

3 存在期生命週期

元件例項物件已經生成時，我們可以通過setState()來更新元件。setState機制後面會有單獨文章分析，現在只用知道它會呼叫updateComponent()來完成更新即可。下面來分析updateComponent

updateComponent: function(transaction, prevParentElement, nextParentElement, prevUnmaskedContext, nextUnmaskedContext
  ) {
    var inst = this._instance;
    var willReceive = false;
    var nextContext;
    var nextProps;

    // context物件如果有改動,則檢查propTypes等,這在開發階段可以報錯提醒
    if (this._context === nextUnmaskedContext) {
      nextContext = inst.context;
    } else {
      nextContext = this._processContext(nextUnmaskedContext);
      willReceive = true;
    }

    // 如果父元素型別相同,則跳過propTypes型別檢查
    if (prevParentElement === nextParentElement) {
      nextProps = nextParentElement.props;
    } else {
      nextProps = this._processProps(nextParentElement.props);
      willReceive = true;
    }

    // 呼叫componentWillReceiveProps,如果通過setState進入的updateComponent，則沒有這一步
    if (willReceive && inst.componentWillReceiveProps) {
      inst.componentWillReceiveProps(nextProps, nextContext);
    }

    // 提前合併state,componentWillReceiveProps中呼叫setState不會重新渲染,在此處做合併即可,因為後面也是要呼叫render的
    // 這樣可以避免沒必要的渲染
    var nextState = this._processPendingState(nextProps, nextContext);

    // 呼叫shouldComponentUpdate給shouldUpdate賦值
    // 如果通過forceUpdate進入的updateComponent，即_pendingForceUpdate不為空，則不用判斷shouldComponentUpdate.
    var shouldUpdate = true;
    if (!this._pendingForceUpdate && inst.shouldComponentUpdate) {
      shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext);
    }

    // 如果shouldUpdate為true,則會執行渲染,否則不會
    this._updateBatchNumber = null;
    if (shouldUpdate) {
      this._pendingForceUpdate = false;
      // 執行更新渲染,後面詳細分析
      this._performComponentUpdate(
        nextParentElement,
        nextProps,
        nextState,
        nextContext,
        transaction,
        nextUnmaskedContext
      );
    } else {
      // shouldUpdate為false,則不會更新渲染
      this._currentElement = nextParentElement;
      this._context = nextUnmaskedContext;
      inst.props = nextProps;
      inst.state = nextState;
      inst.context = nextContext;
    }
},

updateComponent中，先呼叫componentWillReceiveProps，然後合併setState導致的state變化。然後呼叫shouldComponentUpdate判斷是否需要更新渲染。如果需要，則呼叫_performComponentUpdate執行渲染更新，下面接著分析performComponentUpdate。

_performComponentUpdate: function(nextElement,nextProps,nextState,nextContext,transaction,
                                     unmaskedContext
  ) {
    var inst = this._instance;

    // 判斷是否已經update了
    var hasComponentDidUpdate = Boolean(inst.componentDidUpdate);
    var prevProps;
    var prevState;
    var prevContext;
    if (hasComponentDidUpdate) {
      prevProps = inst.props;
      prevState = inst.state;
      prevContext = inst.context;
    }

    // render前呼叫componentWillUpdate
    if (inst.componentWillUpdate) {
      inst.componentWillUpdate(nextProps, nextState, nextContext);
    }

    // state props等屬性設定到內部變數inst上
    this._currentElement = nextElement;
    this._context = unmaskedContext;
    inst.props = nextProps;
    inst.state = nextState;
    inst.context = nextContext;

    // 內部會呼叫render方法，重新解析ReactElement並得到HTML
    this._updateRenderedComponent(transaction, unmaskedContext);

    // render後呼叫componentDidUpdate
    if (hasComponentDidUpdate) {
      transaction.getReactMountReady().enqueue(
        inst.componentDidUpdate.bind(inst, prevProps, prevState, prevContext),
        inst
      );
    }
},

_performComponentUpdate會呼叫componentWillUpdate，然後在呼叫updateRenderedComponent進行更新渲染，最後呼叫componentDidUpdate。下面來看看updateRenderedComponent中怎麼呼叫render方法的。

_updateRenderedComponent: function(transaction, context) {
    var prevComponentInstance = this._renderedComponent;
    var prevRenderedElement = prevComponentInstance._currentElement;

    // _renderValidatedComponent內部會呼叫render,得到ReactElement
    var nextRenderedElement = this._renderValidatedComponent();

    // 判斷是否做DOM diff。React為了簡化遞迴diff,認為元件層級不變,且type和key不變(key用於listView等元件,很多時候我們沒有設定type)才update,否則先unmount再重新mount
    if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) {
      // 遞迴updateComponent,更新子元件的Virtual DOM
      ReactReconciler.receiveComponent(prevComponentInstance, nextRenderedElement, transaction, this._processChildContext(context));
    } else {
      var oldNativeNode = ReactReconciler.getNativeNode(prevComponentInstance);

      // 不做DOM diff,則先解除安裝掉,然後再載入。也就是先unMountComponent,再mountComponent
      ReactReconciler.unmountComponent(prevComponentInstance, false);

      this._renderedNodeType = ReactNodeTypes.getType(nextRenderedElement);

      // 由ReactElement建立ReactComponent
      this._renderedComponent = this._instantiateReactComponent(nextRenderedElement);

      // mountComponent掛載元件,得到元件對應HTML
      var nextMarkup = ReactReconciler.mountComponent(this._renderedComponent, transaction, this._nativeParent, this._nativeContainerInfo, this._processChildContext(context));

      // 將HTML插入DOM中
      this._replaceNodeWithMarkup(oldNativeNode, nextMarkup, prevComponentInstance);
    }
},

_renderValidatedComponent: function() {
    var renderedComponent;
    ReactCurrentOwner.current = this;
    try {
      renderedComponent =
        this._renderValidatedComponentWithoutOwnerOrContext();
    } finally {
      ReactCurrentOwner.current = null;
    }

    return renderedComponent;
},

_renderValidatedComponentWithoutOwnerOrContext: function() {
    var inst = this._instance;
    // 看到render方法了把，應該放心了把~
    var renderedComponent = inst.render();

    return renderedComponent;
},

和mountComponent中一樣，updateComponent也是用遞迴的方式將各子元件進行update的。這裡要特別注意的是DOM diff。DOM diff是React中渲染加速的關鍵所在，它會幫我們算出virtual DOM中真正變化的部分，並對這部分進行原生DOM操作。為了避免迴圈遞迴對比節點的低效率，React中做了假設，即只對層級不變，type不變，key不變的元件進行Virtual DOM更新。這其中的關鍵是shouldUpdateReactComponent，下面分析

function shouldUpdateReactComponent(prevElement, nextElement) {
  var prevEmpty = prevElement === null || prevElement === false;
  var nextEmpty = nextElement === null || nextElement === false;
  if (prevEmpty || nextEmpty) {
    return prevEmpty === nextEmpty;
  }

  var prevType = typeof prevElement;
  var nextType = typeof nextElement;
  // React DOM diff演算法
  // 如果前後兩次為數字或者字元,則認為只需要update(處理文字元素)
  // 如果前後兩次為DOM元素或React元素,則必須在同一層級內,且type和key不變(key用於listView等元件,很多時候我們沒有設定type)才update,否則先unmount再重新mount
  if (prevType === 'string' || prevType === 'number') {
    return (nextType === 'string' || nextType === 'number');
  } else {
    return (
      nextType === 'object' &&
      prevElement.type === nextElement.type &&
      prevElement.key === nextElement.key
    );
  }
}

4 銷燬

前面提到過，更新元件時，如果不滿足DOM diff條件，會先unmountComponent, 然後再mountComponent，下面我們來分析下unmountComponent時都發生了什麼事。和mountComponent的多型一樣，不同type的ReactComponent也會有不同的unmountComponent行為。我們來分析下React自定義元件，也就是ReactCompositeComponent中的unmountComponent。

  unmountComponent: function(safely) {
    if (!this._renderedComponent) {
      return;
    }
    var inst = this._instance;

    // 呼叫componentWillUnmount
    if (inst.componentWillUnmount && !inst._calledComponentWillUnmount) {
      inst._calledComponentWillUnmount = true;
      // 安全模式下，將componentWillUnmount包在try-catch中。否則直接componentWillUnmount
      if (safely) {
        var name = this.getName() + '.componentWillUnmount()';
        ReactErrorUtils.invokeGuardedCallback(name, inst.componentWillUnmount.bind(inst));
      } else {
        inst.componentWillUnmount();
      }
    }

    // 遞迴呼叫unMountComponent來銷燬子元件
    if (this._renderedComponent) {
      ReactReconciler.unmountComponent(this._renderedComponent, safely);
      this._renderedNodeType = null;
      this._renderedComponent = null;
      this._instance = null;
    }

    // reset等待佇列和其他等待狀態
    this._pendingStateQueue = null;
    this._pendingReplaceState = false;
    this._pendingForceUpdate = false;
    this._pendingCallbacks = null;
    this._pendingElement = null;

    // reset內部變數,防止記憶體洩漏
    this._context = null;
    this._rootNodeID = null;
    this._topLevelWrapper = null;

    // 將元件從map中移除,還記得我們在mountComponent中將它加入了map中的吧
    ReactInstanceMap.remove(inst);
  },

可見，unmountComponent還是比較簡單的，它就做三件事

  1. 呼叫componentWillUnmount()
  2. 遞迴呼叫unmountComponent(),銷燬子元件
  3. 將內部變數置空，防止記憶體洩漏

5 總結

React自定義元件建立期，存在期，銷燬期三個階段的生命週期呼叫上面都講完了。三個入口函式mountComponent，updateComponent，unmountComponent尤其關鍵。大家如果有興趣，還可以自行分析ReactDOMEmptyComponent，ReactDOMComponent和ReactDOMTextComponent的這三個方法。

深入學習React生命週期原始碼可以幫我們理清各個方法的呼叫順序，明白它們都是什麼時候被呼叫的，哪些條件下才會被呼叫等等。閱讀原始碼雖然有點枯燥，但能夠大大加深對上層API介面的理解，並體會設計者設計這些API的良苦用心。

相關推薦

React原始碼分析4 — React生命週期詳解

1 React生命週期流程 呼叫流程可以參看上圖。分為例項化，存在期和銷燬三個不同階段。介紹生命週期流程的文章很多，相信大部分同學也有所瞭解，我們就不詳細分析了。很多同學肯定有疑問，這些方法在React內部是在哪些方法中被呼叫的呢，他們觸發的時機又是什麼時

React - 元件的生命週期詳解（及各階段呼叫的方法）

轉自http://www.hangge.com/blog/cache/detail_1473.html React - 元件的生命週期詳解（及各階段呼叫的方法） 2016-12-22釋出：hangge閱讀：2699 ReactJS 的核心思想是元件化，即按功能封裝成一個一個的元

react生命週期詳解

React的生命週期分為三個階段：1.初始化階段 2.更新階段 3.銷燬階段 一，初始化階段 （1） 方法：getDefaultProps(); 作用：作用於元件類，只調用一次，獲取預設的props，也可以用dufaultProps設定元件的預設屬性； 注意： （2） 方法：

【譯】最新版本react元件生命週期詳解（v16.3.1）

16版本的react對元件的生命週期函式進行了一些修改，在每個react元件中都有以下幾個生命週期方法~我們需要在不同階段進行討論。為了良好的閱讀體驗，請檢視github原文 元件生命週期概述 1.初始化 在元件初始化階段會執行 1. const

React—元件生命週期詳解

在元件的整個生命週期中，隨著該元件的props或者state發生改變，它的DOM表現也將有相應的改變，一個元件就是一個狀態機，對於特定的輸入，它總會返回一致的輸出。 React為每個元件提供了生命週期鉤子函式去響應不同的時刻——建立時、存在期及銷燬時。 生命週期方法 R

R4-React生命週期詳解及最新變動

這一章來介紹react元件的生命週期。之前介紹過純函式元件是沒有生命週期的，那到底生命週期是什麼？其實簡單來講就是元件的初始和消亡，就如同小草的生長一樣（配圖隨機，純屬護眼）從發芽到消亡。元件在這個過程中會經歷那些階段，又是如何標誌這些階段的。 本章的重點就是

React學習-- React原始碼（3）生命週期的管理藝術

React的主要思想是通過構建可複用元件來構建使用者介面。 元件：其實就是有限狀態機，通過狀態渲染對應的介面，且每個元件都有自己的生命週期，它規定了元件的狀態和方法需要在那個階段改變和執行。 例如：某個元件有顯示和隱藏兩個狀態，在React中，只需要設定狀態

(十二)React-Native－生命週期詳解

一.React-Native生命週期 說到生命週期，大家大概也能想到就是建立、銷燬、狀態改變。RN的元件就是一個狀態機。它接收兩個輸入引數：props和state，返回一個Virtual DOM。和Native一樣，RN也為我們提供相應的鉤子函式。RN的狀態變化取決於pr

spring原始碼分析：spring生命週期二

接著上一篇我們看看具體是哪裡的程式碼執行了。 1.初始化BeanFactoryPostProcessor invokeBeanFactoryPostProcessors(beanFactory);--> PostProcessorRegistrationDelegate.

spring原始碼分析：spring生命週期

最近在看springboot自動配置，看到了@Conditional,@ConditionalOnMissingBean等等。這些註解，一直研究他們是如何實現springboot的條件註解的。由他們回到了@Configuration,回到了ConfigurationClassPostPr

React原始碼分析7 — React合成事件系統

1 React合成事件特點 React自己實現了一套高效的事件註冊，儲存，分發和重用邏輯，在DOM事件體系基礎上做了很大改進，減少了記憶體消耗，簡化了事件邏輯，並最大化的解決了IE等瀏覽器的不相容問題。與DOM事件體系相比，它有如下特點 React元件上宣

Spring IOC -bean物件的生命週期詳解(補充,含程式碼)

生命週期執行的過程如下:1) spring對bean進行例項化,預設bean是單例2) spring對bean進行依賴注入3) 如果bean實現了BeanNameAware介面,spring將bean的id傳給setBeanName()方法4) 如果bean實現了BeanFactory

Servlet簡介及其生命週期詳解

簡介        Servlet生命週期，即闡述Servlet從產生到毀滅的整個過程。         在Servlet產生到消亡的過程中，有三個生

Android View的onFinishInflate和onSizeChanged生命週期詳解

1、onFinishInflate 從字面上來看這個方法的作用就是在完成View的佈局例項化後的回撥，關於佈局例項化的內容（LayoutInflater）的學習網址：LayoutInflater原理，通過對這篇部落格的 學習可以得知：這個回撥方法是在整個佈局檔案都例項化結束後每個View才進

vue 生命週期詳解

每個Vue例項在被建立之前都要經過一系列的初始化過程,這個過程就是vue的生命週期。下面是生命週期圖   可以看到在vue一整個的生命週期中會有很多鉤子函式提供給我們在vue生命週期不同的時刻進行操作, 那麼先列出所有的鉤子函式，然後我們再一一詳解: befo

vue生命週期詳解

初心-楊瑞超個人部落格誠邀您加入qq群(IT-程式猿-技術交流群)：757345416 先上圖: 下面我們用例項來理解生命週期： <div class="test" style="border: 1px black dashed;padding: 8

Vue2 生命週期詳解

<script> /** * Vue生命週期解析 */ export default { /** * name: name * type: string * explain: 允許元件模板遞迴地呼叫自身。 * 注意，元件在全域性用 Vue.compon

Spring Bean生命週期詳解

  在Spring中 Bean 可謂是一個核心的元素，當我們結合Spring進行程式設計的時候也離不開Bean，面對這樣重要的一個角色，瞭解其生命週期和該生命週期所涉及的環節對我們更加熟練靈活地使用Bean是很有Bean必要的，下面我們就來詳細分析下Bean的生

【vue】vue的生命週期詳解

vue的生命週期詳解 不多BB先上圖 可以看到在vue一整個的生命週期中會有很多鉤子函式提供給我們在vue生命週期不同的時刻進行操作,，那麼先列出所有的鉤子函式，然後我們再進行詳解： beforeCreate——建立前 created——建立後

Servlet的生命週期詳解

敘述Servlet的生命週期其實就是找出Servlet是怎麼出生的又是怎麼消失的一個過程。我們從最主要的三個方法去記錄Servlet產生與消失的過程： 初始化階段，呼叫init方法： 初始化階段。