1. 程式人生 > >React生命周期函數 學習筆記

React生命周期函數 學習筆記

struct 生命 發生 obj object component 卸載 update bject

(一)必須記住的生命周期函數:

  1.  加載的時候: componentWillMount , componentDidMount (dom操作)
  2. 更新的時候: componentWillUpdate , componentDidUpdate
  3. 銷毀的時候: componentWillUnmount

   特殊狀態的處理函數(了解)

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


(二)生命周期詳解

  Mounting:已經插入真實的DOM Updating:正在被重新渲染 Unmounting:已移出真實的DOM

  (1)加載的時候

    componentWillMount: 此方法在mounting之前被立即調用,它在render()之前調用,因此在此方法中setState不會觸發重新渲染。此方法是服務器渲染中調用的唯一的生命周期鉤子,通常我們建議使用constructor()。

   componentDidMount :此方法在組件被 mounted 之後立即被調用,初始化DOM節點應該在此方法中,如果需要從遠端健在數據,這裏是實例化網絡請求的好地方,此方法中 setState 會觸發組件重新渲染。

  (2)更新的時候

   componentWillUpdate:當接收新的 props 或 state 時,componentWillUpdate() 在組件渲染之前被立即調用。使用此函數作為在更新發生之前執行準備的機會。初始渲染不會調用此方法。

    componentDidUpdate:此函數在更新後立即被調用。初始渲染不調用此方法。當組件已經更新時,使用此操作作為DOM操作的機會。這也是一個好的地方做網絡請求,只要你比較當前的props 和以前的props (例如:如果props沒有改變,可能不需要網絡請求)。

  (3) 銷毀的時候

     componentWillUnmount:此函數在組件被卸載和銷毀之前被立即調用。在此方法中執行一些必要的清理。例如清除計時器,取消網絡請求或者清理在componentDidMount 中創建的任何DOM元素。


      生命周期很重要!

React生命周期函數 學習筆記