React Native元件生命週期與父子元件傳值

2021-09-11 13:00:44 字數 3892 閱讀 2248

眾所周知,react native是乙個以元件為基本元素的開發框架,系統為我們提供了大量的現成的元件,我們也可以繼承系統的component和purcomponent自定義元件。既然是元件,那它就有自己的生命週期,通過不同的生命週期函式,我們可以幹不同的事情。react native將元件的生命週期分為如下幾個階段,總的概括起來有:掛載、存活和銷毀幾個階段,涉及到的生命週期函式可以用下面的圖來表示。

下面我們就這些生命週期函式給大家做乙個總結。

getdefaultprops函式的定義如下:

object getdefaultprops()

複製**

此方法在物件被建立之前執行,因此不能在方法內呼叫this.props,被建立的類會有快取,對映的值會存在this.props。同時,需要注意的是getdefaultprops()返回的物件可以在例項中共享,但是不是複製。

getinitialstate函式的定義如下:

object getinitialstate()

複製**

控制項載入之前執行,返回值會被用於state的初始化值。

componentwillmount函式的定義格式如下:

void componentwillmount()

複製**

此方法在初始化render之前執行,如果在方法內呼叫setstate(),則render()只執行一次。

render函式的定義格式如下:

reactelement render()

複製**

呼叫render()方法時,首先檢查this.props和this.state返回乙個子元素,子元素可以是dom元件或者其他自定義復合控制項的虛擬實現 。 如果不想渲染可以返回null或者false,這種場景下,react渲染乙個標籤,當返回null或者false時,呼叫reactdom.finddomnode(this)返回null 。

需要注意的是,render()是很純粹的,之負責介面的渲染工作,如果需要與伺服器進行互動,可以將網路請求放在componentdidmount()函式中。

componentdidmount函式的定義格式如下:

void componentdidmount()

複製**

在初始化render函式之後執行,且只執行一次,這個方法內可以訪問任何元件,如果涉及到巢狀父子元件,則子元件的componentdidmount()方法在父元件之前執行,也就是說父元件的componentdidmount要等子元件的componentdidmount執行完成之後,父元件的componentdidmount才會執行。

shouldcomponentupdate的函式定義格式如下:

boolean shouldcomponentupdate(

object nextprops, object nextstate

)複製**

這個方法在初始化render()時是不會執行,只有當props或者state發生變化時才會執行,並且當發生變化後,shouldcomponentupdate函式在render之前執行,當新的props或者state不需要更新元件時,返回false。

預設情況下,shouldcomponentupdate方法返回true,如果shouldcomponentupdate方法返回false時,將不會執行render()方法,同時componentwillupdatecomponentdidupdate方法也不會被呼叫。

componentwillupdate函式的定義格式如下:

void componentwillupdate(

object nextprops, object nextstate

)複製**

此方法在render方法之前執行,該方法執行的條件是當props和state發生變化時才會執行。

需要特別注意的是,在這個函式裡面,你不能使用this.setstate來修改狀態,這樣會修改狀態機裡面的物件的值。

componentdidupdate函式的格式如下:

void componentdidupdate(

object prevprops, object prevstate

)複製**

此函式在元件更新結束之後執行,在初始化render時不執行。

componentwillreceiveprops函式的定義格式如下:

void componentwillreceiveprops(

object nextprops

)複製**

此函式在props發生變化時執行,在實際使用過程中,你可以根據屬性的變化,通過呼叫this.setstate()來更新元件的狀態,而舊的屬性仍然可以通過this.props來獲取。componentwillreceiveprops呼叫更新狀態是安全的,並不會觸發額外的render呼叫。例如:

componentwillreceiveprops: function(nextprops) );

}複製**

componentwillunmount函式的格式如下:

void componentwillunmount()

複製**

當元件需要從介面上移除的時候,就會呼叫componentwillunmount(),即元件的銷毀階段。

為了說明和理解react native元件的執行的順序和流程,我們可以新建乙個js頁面,然後分別在函式的生命週期中列印函式。例如:

constructor(props)

componentwillmount

() componentdidmount

() shouldcomponentupdate

() componentwillupdate

() componentdidupdate

() componentwillreceiveprops

() componentwillunmount

()複製**

然後我們使用遠端除錯就可以看到相應的執行順序了。

很多情況下我們會自定義一些元件,那麼父子元件怎麼傳值呢?記住一句話,元件傳值使用props,元件內部使用state狀態機。做過android和ios開發的同學都知道,我們自定義元件的時候,為了方便別人使用,我們都會提供自定義的屬性,而react native的自定義元件也可以使用上面的思路。例如:

import react,  from 'react';

import from 'react-native';

import proptypes from 'prop-types';

export default class counter extends component ;

}// 預設屬性

static defaultprops = ;

//繪製介面

render

() // 樣式檔案

const styles = stylesheet.create();

//自定義屬性

counter.proptypes = ;

複製**

React Native 元件生命週期

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

React Native元件生命週期

getdefaultprops 該函式用於初始化一些預設的屬性,通常會將固定的內容放在這個函式 中進行初始化和賦值 在元件建立之前,會先呼叫 getdefaultprops 初始化一些屬性,由於元件初始化後,再次使用該元件不會呼叫getdefaultprops 所以元件自己不可以自己修改props。...

React Native 元件生命週期

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