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

眾所周知，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()方法，同時componentwillupdate和componentdidupdate方法也不會被呼叫。

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元件生命週期與父子元件傳值

React Native 元件生命週期

React Native元件生命週期

React Native 元件生命週期

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

React Native 元件生命週期

React Native元件生命週期

React Native 元件生命週期

相關推薦