React 生命週期鉤子

2021-09-13 17:09:14 字數 1499 閱讀 8047

}es6 class構造方法,接收乙個props屬性物件,props由父元件傳入,如果父元件未傳入,則指向自身。

通常用於初始化state,以及繫結事件處理方法等工作

元件被掛載到dom前,只會呼叫1次, 一般用用更靠前的constructor代替,在其中呼叫this.setstate()不會引起元件重新渲染。

元件的唯一必要方法,根據元件的propsstate返回乙個react元素,用於描述元件的ui

元件被掛載到dom後呼叫,且只會被掉用一次。在其中呼叫this.setstate()會引起元件重新渲染,元件本次的更新還沒有執行完成,又會進入新一輪的更新,導致不斷迴圈更新,進入死迴圈。

***操作,通常用於向後端請求資料。

componentwillreceiveprops(nextprops)

shoudcomponentupdate(nextprops, nextsate)

componentwillupdate

render

componentdidupadate(prevprops, prevstate)

props變化會觸發componentwillreceiveprops,setstate()不會觸發

判斷元件是否繼續更新,減少不必要渲染,優化

在render前呼叫,作為元件更新前執行某些工作過的地方,(shoudcomponentupdate, componentwillupdate 不能呼叫setstate()避免引起迴圈呼叫)

元件更新後呼叫,可以作為更新後呼叫dom的地方,兩個引數代表prevprops, prevstate,

更新前的屬性和狀態。

元件從dom中移除的階段。可用於清楚元件中使用中的定時器,清除componentdidmount手動建立的dom等等,避免記憶體洩露。

React生命週期鉤子

我一直覺得這張圖描述的真是太好了,首先,先看圖。初始化階段 constructor props props的初始設定是在元件的外面 或者在內部使用 靜態屬性 static class home extends react.component home.defaultprops 或者在內部 stati...

react生命週期鉤子

大家先看一張關於元件掛載的經典的 下面一一說一下這幾個生命週期的意義 object getdefaultprops 執行過一次後,被建立的類會有快取,對映的值會存在this.props,前提是這個prop不是父元件指定的 這個方法在物件被建立之前執行,因此不能在方法內呼叫this.props,另外,...

React生命週期鉤子函式

定義 react中元件有生命週期,也就是說也有很多鉤子函式供我們使用,元件的生命週期,我們會分為四個階段,初始化 執行中 銷毀 錯誤處理 16.3之後 注意 生命週期鉤子函式一定不要寫成箭頭函式 react 16.x 版本中共有 10個鉤子函式 四個階段 分別為 1 constructor prop...