生命週期函式可以操作dom React生命週期

2021-10-14 22:37:56 字數 880 閱讀 4145

react生命週期分為15和16兩個不同的版本

react15有四個不同的階段

在元件掛載到dom前呼叫,且只會被呼叫一次,在這邊呼叫this.setstate不會引起元件重新渲染,也可以把寫在這邊的內容提前到constructor()中,所以專案中很少用,它代表的過程是元件已經經歷了constructor()初始化資料後,但是還未渲染dom時。

根據元件的props和state(兩者的重傳遞和重賦值,無論值是否有變化,都可以引起元件重新render) ,當父元件的 render 函式被執行時, 它的子元件的 render 函式也會被重新執行

return 乙個react元素(描述元件,即jsx模板),不負責元件實際渲染工作,之後由react自身根據此元素去渲染出頁面dom。render是純函式(pure function:函式的返回結果只依賴於它的引數;函式執行過程裡面沒有***),不能在裡面執行this.setstate,會有改變元件狀態的***。

元件掛載到dom後呼叫,且只會被呼叫一次

在呼叫render方法前執行,在這邊可執行一些元件更新發生前的工作,一般較少用

此方法在元件更新後被呼叫,可以操作元件更新的dom,prevprops和prevstate這兩個引數指的是元件更新前的props和state

此方法在元件被解除安裝前呼叫,可以在這裡執行一些清理工作,比如清楚元件中使用的定時器,清楚componentdidmount中手動建立的dom元素等,以避免引起記憶體洩漏。

新引入了兩個新的生命週期函式

代替componentwillupdate。常見的 componentwillupdate 的用例是在元件更新前,讀取當前某個 dom 元素的狀態,並在 componentdidupdate 中進行相應的處理。

這兩者的區別在於:

參考自

生命週期函式可以操作dom RN元件生命週期

如圖,可以把元件生命週期大致分為三個階段。第一階段 是元件第一次繪製階段,如圖中的上面虛線框內,在這裡完成了元件的載入和初始化,其中getdefaultprops,getinitialstate 在新版的component中es6語法繼承時,直接複寫方法會報異常,rn api要求我們props,st...

生命週期函式

另外說一下生命週期函式 virtual void onenter virtual void onentertransitiondidfinish virtual void onexit 這3個是遇到對應情況時呼叫的。在cpp檔案裡如果把它們示例了,你可以在開始時放 結束時關閉 等等。如果他下面的之類...

hookEvent還可以監聽生命週期函式

平時在做專案的時候,一般會遇到在某個時候開啟定時器,在離開這個頁面的時候解除安裝掉這個定時器 通常我們都是這樣寫 定時器開啟 methods 1000 destroyed 這樣寫一點毛病沒有,但一般專案裡每個頁面都會有很多方法,就導致你在點選的這個方法裡開啟定時器,你就還要去找這個定時器在 解除安裝...