React生命周期函數 學習筆記
(一)必須記住的生命周期函數:
- 加載的時候: componentWillMount , componentDidMount (dom操作)
- 更新的時候: componentWillUpdate , componentDidUpdate
- 銷毀的時候: componentWillUnmount
特殊狀態的處理函數(了解)
- componentWillReceiveProps(object nextProps): 已加載組件收到新的參數時調用
- 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生命周期函數 學習筆記