react之生命週期淵源

生命週期有哪些以及用法

首次實例化

• getDefaultProps
  做用於組件類，只調用一次，返回對象用於設置默認的props，對於引用值，會在實例中共享
• getInitialState
  做用於組件的實例，在實例建立時調用一次，用於初始化每一個實例的state，此時能夠訪問this.props。
• componentWillMount
  在完成首次渲染以前調用，此時仍能夠修改組件的state。
• reader
  必選的方法，建立虛擬DOM，該方法具備特殊的規則：
  只能經過this.props和this.state訪問數據
  能夠返回null、false或任何React組件
  只能出現一個頂級組件（不能返回數組）
  不能改變組件的狀態
• componentDidMount
  真實的DOM被渲染出來後調用，在該方法中可經過this.getDOMNode()訪問到真實的DOM元素。此時已可 以使用其餘類庫來操做這個DOM。
  在服務端中，該方法不會被調用。

實例化以後完成的更新

• getInitialState
• componentWillMount
• render
• componentDidMount

組件已存在時的狀態改變

• componentWillReciveProps
  組件接收到新的props時調用，並將其做爲參數nextProps使用，此時能夠更改組件props及state。
• shouldComponentUpdate
  組件是否應當渲染新的props或state，返回false表示跳事後續的生命週期方法，一般不須要使用以免出現bug。在出現應用的瓶頸時，可經過該方法進行適當的優化。
  在首次渲染期間或者調用了forceUpdate方法後，該方法不會被調用
• componentWillUpdate
  接收到新的props或者state後，進行渲染以前調用，此時不容許更新props或state。
• render
• componentDidUpdate
  完成渲染新的props或者state後調用，此時能夠訪問到新的DOM元素。

組件銷燬

• componentWillUnmount

生命週期函數的淵源

自定義組件（ReactCompositeComponent）的生命週期主要經過三種狀態進行管理：MOUNTING、RECEIVE_PROPS、UNMOUNTING，它們負責通知組件當前所處的狀態，應該執行生命週期中的哪一個步驟，是否能夠更新 state。三個狀態對應三種方法，分別爲：mountComponent、updateComponent、unmountComponent，每一個方法都提供了兩種處理方法

getDefaultProps

• 這個生命週期函數是在組件初始化構造函數中執行，因此只執行一次

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

狀態一：MountComponent

• 因爲react構建的是虛擬DOM因此要準備開始渲染頁面以前拿到的虛擬的DOM，須要通過組裝以後而後給到瀏覽器，在這裏會發生：首先會經過getInitialState拿到初始化的數據

  // 當前狀態爲 MOUNTING
    this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING;
  
    // 當前元素對應的上下文
    this.context = this._processContext(this._currentElement._context);
  
    // 當前元素對應的 props
    this.props = this._processProps(this.props);
  
    // 獲取初始化 state
    this.state = this.getInitialState();

• 而後判斷若是有componentwillMount就會運行這裏的js語法，在這裏若是有state發生變化不會立刻出發render而是與initialState進行，組成新的state；這裏渲染的時候是經過遞歸的方式進行渲染因此父組件的componentWillMount在子組件的componentWillMount以前執行，而子組件的componentDidMount在父組件的componentDidMount以前執行，這塊可能有點繞，直接上代碼

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

• 這樣就把dom與state以及props數據拿到就能夠完整的進行渲染
• 最後判斷是否有componentDidMount，若是有會執行這裏的js

狀態二：receive Props

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

• compnentWillReciveProps中setState在componentWillReceiveProps、shouldComponentUpdate 和 componentWillUpdate 中仍是沒法獲取到更新後的 this.state，即此時訪問的this.state 仍然是未更新的數據，只有在 render 和 componentDidUpdate 中才能獲取到更新後的this.state。
• 禁止在 shouldComponentUpdate 和 componentWillUpdate 中調用 setState，會形成循環調用，直至耗光瀏覽器內存後崩潰。(若是在 shouldComponentUpdate 或 componentWillUpdate 中調用 setState，此時的狀態已經從 RECEIVING_PROPS -> NULL，則 performUpdateIfNecessary 就會調用 updateComponent 進行組件更新，但 updateComponent 又會調用 shouldComponentUpdate 和 componentWillUpdate，所以形成循環調用，使得瀏覽器內存佔滿後崩潰。)

狀態三：unMountComponent

• 在 componentWillUnmount 中調用 setState，是不會觸發 reRender。