React組件的生命週期

標籤：

回顧前面的知識

1. props只能進行資料傳遞，不能修改，並且只能通過父組件傳給子組件；
2. state（狀態）用來儲存互動的狀態，每個組件內建state屬性。不能在組件之間傳遞資料。
3. 組件之間傳值可以找到這些組件之間共有的父組件，把state屬性設定在父組件上。
4. react可以通過fetch()方法來完成ajax的非同步提交。
5. 組件生命週期前兩種：
   • componentWillMount 組件渲染之前載入，在這個周期裡邊修改，不會進行再次渲染。
   • componentDidLMount 組件渲染之後載入，在這個周期裡邊修改，會進行再次渲染。

組件的生命週期

1. componentWillReceiveProps （組件的props改變執行），有一個參數（newProps) 如果只改變當前組件的state，這個周期就不會執行。
2. shouldComponentUpdate 只要屬性props或state改變，都會執行。 傳回值是一個布爾值，當傳回值為true時執行後面的周期，傳回值為false時不執行後面的周期。有兩個參數（newprops, newState)。

在上面兩個周期中都可以修改state。

3. componentWillUpdate 組件即將修改事執行。不能在這個周期裡邊修改state，否則會陷入死迴圈。
4. render 組件渲染
5. componmentDidUpdate 組件修改後，這個周期裡邊也不能修改state。
6. 最後一個生命週期，componmentWillUnmount 組件銷毀後執行。

補充一個比較全面的組件聲明周期的短文。

React組件的生命週期

一個組件就是一個狀態機器，對於特定的狀態，他總是返回一致的輸出。 組件的生命週期

執行個體化

● getDefaultProps :

對於組件類來說，這個方法只會執行一次。對於沒有被父類組件置頂props屬性的建立執行個體來說，這個方法返回的對象可用於為執行個體設定預設的props值。

● getInitialState :

對於組件的每個執行個體來說，這個方法調用次數有且只有一次。在這個方法裡面，你可以初始化你的每個執行個體的state。與getDefaultProps方法不同的是，每次執行個體建立時該方法都會被調用一次。在這個方法裡，你已經可以訪問到this.props。

● componmentWillMount :

該方法會在完成首次渲染之前被執行，這也是在render方法調用前可以修改組件state的最後一次機會。

● render :

在這裡你會建立一個虛擬DOM，用來表示組件的輸出。對於一個組件來說，render是唯一一個必須的犯法，並且有特定的規則。render方法需要滿足以下幾個條件。 ○ 只能通過this.props和this.state訪問資料 ○ 可以返回null、false或者任何的React組件 ○ 只能出現一個頂級組件，不能返回一組元素 ○ 必須純淨，意味著不能改變組件的狀態或者修改DOM的輸出

● componmentDidMount :

render方法成功執行之後，會渲染出來真實的DOM，你可以在該方法中使用this.getDOMNode()方法訪問原生DOM。

存在期

此時，組件已經渲染好，可以與使用者進行互動操作了。隨著使用者的點擊、手指滑動等互動操作，改變組件或者整個應用的state，便會有新的state流入組件樹，並且我們將會獲得操作它的機會。

● componmentWillReceiveProps:

在任何時刻，組件的props都可以通過父輩組件來更改。出現這種情況時，componmentWillReceiveProps方法會被掉用，你也獲得了更改props和state的機會。 ● shouldComponentUpdate:

通過調用該方法，可以對組件進行精準最佳化。如果你確定某個組件或者它的任何子控制項不需要渲染新的state或者props，則將該方法的傳回值設定為false。React會跳過render。以及位於render前後的鉤子方法，componmentWillUpdate和componmentDidUpdate。該方法是非必須的，並且大部分情況下沒必要在開發中使用它。

● componmentWillUpdate:

和componmentWillMount方法類似，組件會在接收到新的props或者state進行渲染之前，調用該方法。需要注意的是，不能在該方法中更新state或者props,而應該藉助componmentWillReceiveProps方法在運行時更新state。

● componmentDidUpdate:

和componmentDidMount方法一樣，我們可以在這裡對已經渲染好的DOM變更操作。

銷毀 & 清理期

● componmentWillUnmount : 在這裡進行組件移除以後的一些操作。

React組件的生命週期