React生命周期函數


1.組件生命周期的執行次數

只執行一次: constructor、componentWillMount、componentDidMount

執行多次:render 、子組件的componentWillReceiveProps、componentWillUpdate、componentDidUpdate

有條件的執行:componentWillUnmount(頁面離開,組件銷毀時)

不執行的:根組件(ReactDOM.render在DOM上的組件)的componentWillReceiveProps(因為壓根沒有父組件給傳遞props)

 

2.有父,子,孫子的頁面,生命周期執行順序

假設組件嵌套關系是  App里有parent組件,parent組件有child組件。

1、如圖:完成前的順序是從根部到子部,完成時時從子部到根部。(類似於事件機制)

2、每個組件的紅線(包括初次和更新)生命周期時一股腦執行完畢以后再執行低一級別的紅線生命周期。

 

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

 

感覺這個情景用的不是很多

 

3. componentWillReceiveProps

大部分情況下 componentWillReceiveProps 生命周期函數是沒用的,即可以略去不寫

但是在constructor函數中初始化了某個state,必須用 componentWillReceiveProps 來更新state,不可省去,否則render中的state將得不到更新。

同時如果您想在子組件監聽watch值變化做處理,也可以用到componentWillReceiveProps 注意:使用componentWillReceiveProps的時候,不要去向上分發,調用父組件的相關setState方法,否則會成為死循環。

 

以上內容,搬運自react的生命周期需要知道的  博客,想看詳細內容可以跳轉過去查看,博主寫的很詳細

 


 

另,貼一個在線查看生命周期說明的鏈接:http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

如下圖,可以點擊生命周期,進入React官網進行查看

 


免責聲明!

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



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