React Native元件生命週期

2021-07-27 13:08:07 字數 2436 閱讀 1547

getdefaultprops

該函式用於初始化一些預設的屬性,通常會將固定的內容放在這個函式 中進行初始化和賦值;

在元件建立之前,會先呼叫 getdefaultprops()初始化一些屬性,由於元件初始化後,再次使用該元件不會呼叫getdefaultprops(),所以元件自己不可以自己修改props。

getinitialstate

該函式是用於對元件的一些狀態進行初始化;

該函式不同於getdefaultprops,在以後的過程中,可以再次呼叫。

比如:

this

.setstate();

注:一旦呼叫了this.setstate方法,元件一定會呼叫render方法,對元件進行再次的渲染,不過,如果react框架會自動根據dom的狀態來判斷是否需要真正的渲染。

componentwillmount

這個函式呼叫時機是在元件建立,並初始化了狀態之後,在第一次繪製 render() 之前。這個函式在整個生命週期中只被呼叫一次。

render是乙個元件中必須有的方法,本質上是乙個函式,並返回jsx或其他元件來構成dom,和android的xml布局類似。作用是通知系統準備載入元件。

componentdidmount

該方法是在呼叫了render方法後,通知元件已經載入完成。一般會在這個函式中處理網路請求等載入資料的操作;

componentwillreceiveprops

如果元件收到新的屬性(props),就會呼叫 componentwillreceiveprops()對元件的props或state進行了修改。

舊的屬性還是可以通過 this.props 來獲取,通過呼叫 this.setstate() 來更新你的元件狀態,這裡呼叫更新狀態是安全的,並不會觸發額外的 render() 呼叫。

shouldcomponentupdate

當元件接收到新的屬性和狀態改變的話,都會觸發呼叫 shouldcomponentupdate(…),通過返回false或true來控制是否進行介面的渲染。如果 true 表示需要更新,繼續走後面的更新流程。否者,則不更新,直接進入等待狀態。

componentwillupdate

如果元件狀態或者屬性改變,並且上面的 shouldcomponentupdate() 返回為 true,就會開始準更新元件,並呼叫 componentwillupdate(),元件重新整理前呼叫,有點類似於componentwillmount()。

componentdidupdate

呼叫了 render() 更新完成介面之後,會呼叫 componentdidupdate() 來得到通知,其函式原型如下:

void componentdidupdate(  

object prevprops, object prevstate

)

componentwillunmount

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

生命週期

呼叫次數

能否使用 setsate()

getdefaultprops

全域性呼叫1次

否getinitialstate1否

componentwillmount1是

render

>=1

否componentdidmount1是

componentwillreceiveprops

>=0

是shouldcomponentupdate

>=0

否componentwillupdate

>=0

是componentdidupdate

>=0

是componentwillunmount1是

web介面由dom樹來構成,當其中某一部分發生變化時,其實就是對應的某個dom節點發生了變化。在react中,構建ui介面的思路是由當前狀態決定介面。前後兩個狀態就對應兩套介面,然後由react來比較兩個介面的區別,』這就需要對dom樹進行diff演算法分析。

即給定任意兩棵樹,找到最少的轉換步驟。但是標準的的diff演算法複雜度需要o(n^3),這顯然無法滿足效能要求。要達到每次介面都可以整體重新整理介面的目的,勢必需要對演算法進行優化。這看上去非常有難度,然而facebook工程師卻做到了,他們結合web介面的特點做出了兩個簡單的假設,使得diff演算法複雜度直接降低到o(n)兩個相同元件產生類似的dom結構,不同的元件產生不同的dom結構;對於同一層次的一組子節點,它們可以通過唯一的id進行區分。

React Native 元件生命週期

1.元件生命週期 元件的生命週期包含三個主要部分 掛載 元件被插入到dom中。更新 元件被重新渲染,查明dom是否應該重新整理。移除 元件從dom中移除。react提供生命週期方法,你可以在這些方法中放入自己的 我們提供will方法,會在某些行為發生之前呼叫,和did方法,會在某些行為發生之後呼叫。...

React Native 元件生命週期

rn中元件生命週期主要由三個部分組成 掛載,更新,移除 1.掛載 getinitialstate 元件掛載前呼叫,一般用於設定元件初始狀態 componentwillmount 掛載前立即呼叫 componentdidmount 掛載後立即執行 2.更新 componentwillreceivepr...

react native 元件生命週期變化

生命週期方法 componentdidmount元件載入完成後進行,props修改並不能進入componentdidmount,也不能讓元件自動重新整理。存在期componentwillreceiveprops元件顯示期間,接受比較nextprops和this.props從而進行props的修改,或...