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。

  1. componentWillUpdate 組件即將修改事執行。不能在這個周期里邊修改state,否則會陷入死循環。
  2. render 組件渲染
  3. componmentDidUpdate 組件修改后,這個周期里邊也不能修改state。
  4. 最后一個生命周期,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 : 在這里進行組件移除以后的一些操作。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM