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

2021-10-14 22:37:56 字數 1875 閱讀 4963

如圖,可以把元件生命週期大致分為三個階段。

第一階段:是元件第一次繪製階段,如圖中的上面虛線框內,在這裡完成了元件的載入和初始化,其中getdefaultprops,getinitialstate 在新版的component中es6語法繼承時,直接複寫方法會報異常,rn api要求我們props,state的初始化在component的constructor函式中完成;

第二階段:是元件在執行和互動階段,如圖中左下角虛線框,這個階段元件可以處理使用者互動,或者接收事件更新介面;

第三階段:是元件解除安裝消亡的階段,如圖中右下角的虛線框中,這裡做一些元件的清理工作。

進入乙個rn介面時,component的宣告週期函式大致流程如下:

1.constructor建構函式,從上乙個介面傳過來的資料props在作為constructor的引數,在constructor中做一些初始化的操作,如props,state等初始化;函式原型:void constructor(props)

2.componentwillmount,第一次繪製元件(render)前觸發該生命週期函式;函式原型:void componentwillmount()

3.render繪製元件到介面上;函式原型:void render()

4.componentdidmount,第一次揮之元件(render)後觸發該生命週期函式,觸發該函式說明rn元件繪製已經完成了,虛擬dom已經構建完成;從這個函式開始我們就可以和js其他框架開始互動了,例如定時器,網路請求等操作。函式原型:void componentdidmount()

5.componentwillreceiveprops,當元件收到新的屬性時,觸發該函式。函式原型:void componentwillreceiveprops( object nextprops )

6.shouldcomponentupdate,當元件屬性(props)或者狀態(state)發生變化時,都會觸發該函式。函式原型:boolean shouldcomponentupdate( object nextprops, object nextstate ); 若函式返回true,則繼續觸發componentwillupdate,render,componentdidupdate等方法;若函式返回false,則不做任何處理;預設情況下,這個函式永遠返回true用來保證資料變化的時候 ui 能夠同步更新。在大型專案中,你可以自己過載這個函式,通過檢查變化前後屬性和狀態,來決定 ui 是否需要更新,能有效提高應用效能。

7.componentwillupdate,如果元件狀態或者屬性改變,並且上面的shouldcomponentupdate(object nextprops, object nextstate)返回為true,則觸發該方法,函式原型:void componentwillupdate(object nextprops, object nextstate),函式中引數實際上與shouldcomponentupdate中的引數一樣,是同乙個資料來源;需要特別注意的是,在這個函式裡面,你就不能使用this.setstate來修改狀態,否則會迴圈呼叫該函式導致堆疊溢位。這個函式呼叫之後,就會把nextprops和nextstate分別設定到this.props和this.state中。緊接著這個函式,就會呼叫render()來更新介面了。

8.componentdidupdate,更新render結束後,則呼叫該方法,函式原型:void componentdidupdate(object prevprops, object prevstate);因為到這裡已經完成了屬性和狀態的更新了,此函式的輸入引數變成了prevprops和prevstate。

9.componentwillunmount,當元件要被從介面上移除的時候,就會呼叫componentwillunmount(),函式原型:void componentwillunmount();在這個函式中,可以做一些元件相關的清理工作,例如取消計時器、網路請求等。

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

react生命週期分為15和16兩個不同的版本 react15有四個不同的階段 在元件掛載到dom前呼叫,且只會被呼叫一次,在這邊呼叫this.setstate不會引起元件重新渲染,也可以把寫在這邊的內容提前到constructor 中,所以專案中很少用,它代表的過程是元件已經經歷了construc...

生命週期函式

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

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

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