組件的生命周期

概念：

    1、在組件創建、加載到頁面上運行、以及組件被銷毀的過程中，總是伴隨着各種各樣的事件，這些在組件特定時期，觸發的事件，統稱為組件的生命周期。

    2、組件生命周期的階段：

         - 組件的創建階段

特點是：創建階段的生命周期函數在組件中，一生只執行一次。

》 componentWillMount: 
      1、在組件即將掛載到頁面上的時候，此時組件沒有掛載到頁面;
      2、虛擬DOM還沒有開始創建;此階段不能操作DOM；
      3、該鈎子函數相當於vue中的created鈎子函數
》 render: 
    1、將要開始渲染內存中的虛擬DOM，當這個函數執行完了只有，內存中
         就有了一個渲染好的虛擬DOM，但是頁面上尚未真正顯示DOM元素；
    2、在return 之前，虛擬DOM還沒有開始創建，頁面上也是空的，根本拿
         不到任何元素；
    3、當return執行完畢后，虛擬DOM已經創建好了，但是還沒有掛載到真正
         的頁面中
》 componentDidMount: 
   1、當組件掛載到頁面上之后，會進入到這個生命周期函數，只要進入這個
         生命周期函數，必然說明頁面上已經有可見的DOM元素了；
   2、在這個函數中，我們可以放心的去操作頁面上需要使用的DOM元素了，
         所以如果我們想操作DOM元素，最早只能在componentDidMount中進行；
   3、componentDidMount相當於vue中的mounted函數

         - 組件的運行階段

特點是：根據組件的state和props的改變，有選擇性的觸發0次或多次。

》 componentWillReceiveProps: 
         1、組件將要接收外界傳遞過來的新的props屬性值
         2、當子組件第一次被渲染到頁面上的時候，不會觸發這個函數
         3、只有當父組件中，通過某些事件修改了傳遞給子組件的props數據之后，才會觸發這個函數
         4、在componentWillReceiveProps被觸發的時候，如果我們使用this.props來獲取屬性值，此時不是最新的，是上一次舊的屬性值；如果想要獲取最                新的屬性值，需要通過componentWillReceiveProps參數列表來獲取
》 shouldComponentUpdate: 
      1、組件是否需要被更新，此時組將尚未被更新，但是state和props肯定是最新的
          2、在該鈎子函數中要求必須返回一個布爾值，若返回false，則不會繼續執行后續的生命周期函數，而是直接退回到了運行中的狀態，此時后續的                         render函數並 沒有被執行，因此頁面不回被更新，但是組建的state狀態卻被修改了
》 componentWillUpdate: 
          1、組件將要更新，此時尚未更新，在進入這個生命周期函數的時候，內存中的虛擬DOM是舊的，頁面上的DOM元素也是舊的
          2、此時頁面上的DOM節點，都是舊的，應該慎重操作，因為可能操作的是舊DOM
》 render: 此時又要重新根據新的state和props重新渲染一顆內存中的虛擬DOM樹，當render調用完畢，內存中的舊DOM樹已經被新DOM樹替換了，此時頁面還是舊的。
》 componentDidUpdate: 此時頁面又被重新渲染了，state和虛擬DOM和頁面已經完全保持同步了

         - 組件的銷毀階段

特點是：一生只執行一次。

》 componentWillUnmount: 組建將要被卸載，此時組建還可以正常使用 

 

組件生命周期的執行順序：

 Mounting：
     constructor()
     componentWillMount()
     render()
     componentDidMount()
 Updating：
     componentWillReceiveProps(nextProps)
     shouldComponentUpdate(nextProps, nextState)
     componentWillUpdate(nextProps, nextState)
     render()
     componentDidUpdate(prevProps, prevState)
 Unmounting：
     componentWillUnmount()