React生命周期

掛在?

constructor()

static getDerivedStateFromProps()

static getDerivedStateFromProps(props,state)

getDerivedStateFromProps?會在調(diào)用 render 方法之前調(diào)用,并且在初始掛載及后續(xù)更新時都會被調(diào)用。它應(yīng)返回一個對象來更新 state,如果返回 null 則不更新任何內(nèi)容。

此方法適用于罕見的用例,即 state 的值在任何時候都取決于 props。例如,實現(xiàn)?<Transition>?組件可能很方便,該組件會比較當(dāng)前組件與下一組件,以決定針對哪些組件進行轉(zhuǎn)場動畫。

此方法無權(quán)訪問組件實例。如果你需要,可以通過提取組件 props 的純函數(shù)及 class 之外的狀態(tài),在getDerivedStateFromProps()和其他 class 方法之間重用代碼。

render()

componentDidMount()

更新

static getDerivedStateFromProps()

getSnapshotBeforeUpdate(prevProps,prevState)

getSnapshotBeforeUpdate()?在最近一次渲染輸出(提交到 DOM 節(jié)點)之前調(diào)用。它使得組件能在發(fā)生更改之前從 DOM 中捕獲一些信息(例如,滾動位置)。此生命周期的任何返回值將作為參數(shù)傳遞給?componentDidUpdate()。

此用法并不常見,但它可能出現(xiàn)在 UI 處理中,如需要以特殊方式處理滾動位置的聊天線程等。

應(yīng)返回 snapshot 的值(或?null)。

shouldComponentUpdate()

shouldComponentUpdate(nextProps,nextState)

根據(jù)?shouldComponentUpdate()?的返回值,判斷 React 組件的輸出是否受當(dāng)前 state 或 props 更改的影響。默認(rèn)行為是 state 每次發(fā)生變化組件都會重新渲染。大部分情況下,你應(yīng)該遵循默認(rèn)行為。

當(dāng) props 或 state 發(fā)生變化時,shouldComponentUpdate()?會在渲染執(zhí)行之前被調(diào)用。返回值默認(rèn)為 true。首次渲染或使用?forceUpdate()?時不會調(diào)用該方法。

此方法僅作為性能優(yōu)化的方式而存在。不要企圖依靠此方法來“阻止”渲染,因為這可能會產(chǎn)生 bug。你應(yīng)該考慮使用內(nèi)置的?PureComponent?組件,而不是手動編寫?shouldComponentUpdate()。PureComponent?會對 props 和 state 進行淺層比較,并減少了跳過必要更新的可能性。

如果你一定要手動編寫此函數(shù),可以將?this.props?與?nextProps?以及?this.state?與nextState?進行比較,并返回?false?以告知 React 可以跳過更新。請注意,返回?false?并不會阻止子組件在 state 更改時重新渲染。

我們不建議在?shouldComponentUpdate()?中進行深層比較或使用?JSON.stringify()。這樣非常影響效率,且會損害性能。

render()

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate()?在最近一次渲染輸出(提交到 DOM 節(jié)點)之前調(diào)用。它使得組件能在發(fā)生更改之前從 DOM 中捕獲一些信息(例如,滾動位置)。此生命周期的任何返回值將作為參數(shù)傳遞給?componentDidUpdate()。

此用法并不常見,但它可能出現(xiàn)在 UI 處理中,如需要以特殊方式處理滾動位置的聊天線程等。

應(yīng)返回 snapshot 的值(或?null)。

componentDidUpdate()

componentDidUpdate(prevProps,prevState,snapshot)

componentDidUpdate()?會在更新后會被立即調(diào)用。首次渲染不會執(zhí)行此方法。


卸載

componentWillUnmount()


錯誤處理

static getDerivedStateFromError()

此生命周期會在后代組件拋出錯誤后被調(diào)用。 它將拋出的錯誤作為參數(shù),并返回一個值以更新 stat

componentDidCatch()

此生命周期在后代組件拋出錯誤后被調(diào)用。 它接收兩個參數(shù):

error?—— 拋出的錯誤。

info?—— 帶有?componentStack?key 的對象,其中包含有關(guān)組件引發(fā)錯誤的棧信息。

componentDidCatch()?會在“提交”階段被調(diào)用,因此允許執(zhí)行副作用。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn)好像有些沒有過的生命周期函數(shù),還沒完全弄清楚... 一、組件的生命周期 組件的生命周期,主要分為 Mounti...
    越前君閱讀 2,293評論 0 4
  • React 生命周期可以分為三部分 一、掛載時 當(dāng)組件實例被創(chuàng)建并插入 DOM 中時,其生命周期調(diào)用順序如下: c...
    ByePast閱讀 1,382評論 0 0
  • react 生命周期函數(shù) React 生命周期分為三種狀態(tài) 1. 初始化 2.更新 3.銷毀初始化 初始化 get...
    騎著蝸牛逛妓院閱讀 348評論 0 1
  • 對于react生命周期的理解,反反復(fù)復(fù)有很多次不同的理解,我就做個整理,以免每次都進行重新推翻按照官網(wǎng)的解釋組件的...
    sherry_碎片閱讀 583評論 0 0
  • 某一時刻可以被組件自動調(diào)用的函數(shù) 掛載 當(dāng)組件實例被創(chuàng)建并插入 DOM 中時,其生命周期調(diào)用順序如下: const...
    RQrry閱讀 122評論 0 0

友情鏈接更多精彩內(nèi)容