react學習筆記之組件生命周期


React 中的組件有三種狀態:

  • Mounted:已插入真實 DOM
  • Updating:正在被重新渲染
  • Unmounted:已移出真實 DOM

它為每個狀態都提供了兩種處理函數:

  will:函數在進入狀態之前調用,

  did: 函數在進入狀態之后調用,三種狀態共計五種處理函數。

所以,除了組件初始化時調用的getDefaultProps,getInitialState方法外,每個組件還有

componentWillMount,componentDidMount,componentWillUpdate,componentDidUpdate,componentWillUnmount五種方法;

除此之外,react還提供了兩種特殊狀態的處理函數:

  • componentWillReceiveProps(object nextProps):已加載組件收到新的參數時調用
  • shouldComponentUpdate(object nextProps, object nextState):組件判斷是否重新渲染時調用

 

當一個組件被調用的時候先執行getDefaultProps,getInitialState獲取他的默認屬性和狀態,然后執行componentWillMount(即將渲染),接下來渲染到dom樹上,渲染完成觸發componentDidMount函數;

這時候,該組件就進入了一個running狀態,並監視他的props和state以及被移除事件:

  當props發生變化時執行componentWillReceiveProps然后去判斷是否需要重新渲染(shouldComponentUpdate),如果不需要則繼續保持running狀態;如果需要則如初始時一樣,執行componentWillMount(即將渲染),接下來渲染到dom樹上,渲染完成觸發componentDidMount函數,保持running狀態繼續監視;

  當state發生變化時,則直接判斷是否需要重新渲染(shouldComponentUpdate),然后根據是否需要決定執行渲染過程還是繼續保持running狀態;

  當該組件被移除(unmount)時,將直接執行componentWillUnmount,該組件從dom樹上消失;


免責聲明!

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



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