react的生命週期須要知道的。

有關React生命週期：

一、組件生命週期的執行次數是什麼樣子的？？？

   只執行一次： constructor、componentWillMount、componentDidMount

　　執行屢次：render 、子組件的componentWillReceiveProps、componentWillUpdate、componentDidUpdate

　　有條件的執行：componentWillUnmount（頁面離開，組件銷燬時）

　　不執行的：根組件（ReactDOM.render在DOM上的組件）的componentWillReceiveProps（由於壓根沒有父組件給傳遞props）

 

二、組件的生命週期執行順序是什麼樣子的？？？

　　假設組件嵌套關係是  App裏有parent組件，parent組件有child組件。

     若是不涉及到setState更新，第一次渲染的順序以下：

App：   constructor --> componentWillMount -->  render --> 
parent: constructor --> componentWillMount -->  render --> 
child:    constructor --> componentWillMount -->  render  --> 
componentDidMount (child) -->  componentDidMount (parent) --> componentDidMount (App)

 

   這時候觸發App的setState事件

App：   componentWillUpdate --> render --> 
parent: componentWillReceiveProps --> componentWillUpdate --> render --> 
child:    componentWillReceiveProps --> componentWillUpdate --> render -->
componentDidUpdate (child) -->  componentDidUpdate (parent) --> componentDidUpdate (App)

 

那若是是觸發parent的setState呢？

parent： componentWillUpdate --> render --> 
child:     componentWillReceiveProps --> componentWillUpdate --> render --> 
componentDidUpdate (child) -->  componentDidUpdate (parent) 

 

那若是是隻是觸發了child組件自身的setState呢？

child： componentWillUpdate --> render -->  componentDidUpdate (child)

 

結論：

一、如圖：完成前的順序是從根部到子部，完成時時從子部到根部。（相似於事件機制）

二、每一個組件的紅線（包括初次和更新）生命週期時一股腦執行完畢之後再執行低一級別的紅線生命週期。

三、第一級別的組件setState是不能觸發其父組件的生命週期更新函數，只能觸發更低一級別的生命週期更新函數。

 

總結起來就以下圖：

 

 提問：那麼這裏提一個問題，若是App裏面有多個parent1 parent2 ...，parent裏由多個child，那麼生命週期執行順序應該時什麼樣的？？？？

結論：一套組件（父包括子，子包括孫）執行的時候一個總體，執行完畢在執行下一套，用到這裏就是App裏先執行parent1和parent1的子，子的子。。。，而後完畢再執行parent2這一套。

 

 三、何時該用componentWillReceiveProps？

    是否每一個子組件都須要componentWillReceiveProps生命週期函數來更新數據嗎？ 你的原則是？？

 

A、開始前首先須要知道componentWillReceiveProps函數有一個參數nextProps，它是一個 { 對象 } ，從單詞就能夠看出它是update時候（也就是下一次）父組件傳遞過來的props。

B、還要知道 "第一條中" 所講解的有些生命週期函數只執行一次，而有的執行屢次，其中componentWillReceiveProps執行屢次，而constructor等執行一次。

C、還需知道在子組件中每次傳遞過來的this.props對象其實和componentWillReceiveProps的nextProps是同樣的，都是最新的。

D、由"第一條"得知： componentWillReceiveProps生命週期是在更新子組件最早執行的，優先於compoentWillUpdate，更優先於render。

E、render函數裏不能使用setState()，不然會形成死循環。

 

那麼知道了以上呢？  

 

由C得知，  this.props  和  componentWillReceiveProps的nextProps都是同樣的，經過this.props就能夠取到最新的值， 那麼componentWillReceiveProps還有必要嗎？

因此：大部分狀況下 componentWillReceiveProps 生命週期函數是沒用的，便可以略去不寫，由於它確實沒什麼用。

 

可是狀況1：

　　由D得知，componentWillReceiveProps是最早執行的，因此在其內能夠setState(｛｝)，在接下來的render中能拿到最新的state後值，再加上B得知，

若是是下面這種狀況： 在constructor函數中初始化了某個state，必須用 componentWillReceiveProps 來更新state，以便render中爲新的state值。

 

 狀況2：

　　若是父組件有一些請求，每次參數更新的時候才發請求，同時和子組件的關係比較密切，

能夠將數據請求放在componentWillReceiveProps進行執行，須要傳的參數則從(nextProps)中獲取。

而沒必要將全部的請求都放在父組件中，因而該請求只會在該組件渲染時纔會發出，從而減輕請求負擔。

 

 狀況3：

　　watch監聽props值變化，對子組件進行處理，好比：當傳入的props.value發生變化，執行一些動做。 

　　若是你接觸過vue，會知道vue中有一個關於watch的選項，是根據setter獲取新舊值，進行動做的執行

　　而react中最合適作watch的時機是在componentWillReceiveProps中

componentWillReceiveProps(nextProps) {
        // this.props中的值是舊值
        // nextProps中的值是新值
    const { value: oldValue } = this.props;
    const { value: newValue } = nextProps;
    if (newValue !== oldValue) {
            // TODO...
    }
}

 

結論： 大部分狀況下 componentWillReceiveProps 生命週期函數是沒用的，便可以略去不寫，

可是在constructor函數中初始化了某個state，必須用 componentWillReceiveProps 來更新state，不可省去，不然render中的state將得不到更新。
同時若是您想在子組件監聽watch值變化作處理，也能夠用到componentWillReceiveProps

注意：使用componentWillReceiveProps的時候，不要去向上分發，調用父組件的相關setState方法，不然會成爲死循環。