React Native生命周期
各個函數(shù)的介紹:
getDefaultProps:
在組件創(chuàng)建之前毕源,會先調(diào)用 getDefaultProps() 跪妥,這是全局調(diào)用一次,嚴(yán)格地來說,這不是組件的生命周期的一部分卡乾。在組件被創(chuàng)建并加載候夭苗,首先調(diào)用 getInitialState() 信卡,來初始化組件的狀態(tài)。
設(shè)置組件屬性的默認(rèn)值题造,在組件類創(chuàng)建的時(shí)候調(diào)用一次傍菇,然后返回值被緩存下來。如果父組件沒有指定 `props` 中的某個鍵界赔,則此處返回的對象中的相應(yīng)屬性將會合并到 `this.props` (使用 in 檢測屬性)丢习。
注意:
該方法在任何實(shí)例創(chuàng)建之前調(diào)用,因此不能依賴于this.props
淮悼。另外咐低,getDefaultProps()
返回的任何復(fù)雜對象將會在實(shí)例間共享,而不是每個實(shí)例擁有一份拷貝袜腥。通常用于為組件初始化默認(rèn)屬性见擦。
getInitialState
object getInitialState()
初始化組件狀態(tài),在組件掛載之前調(diào)用一次。返回值將會作為 this.state
的初始值鲤屡。
注意:通常在該方法中對組件的狀態(tài)進(jìn)行初始化儡湾。
一般我們都會使用this.state.XX獲取當(dāng)前狀態(tài)的值,使用this.setState({key:value})來改變狀態(tài)执俩。
componentWillMount
這個函數(shù)調(diào)用時(shí)機(jī)是在組件創(chuàng)建徐钠,并初始化了狀態(tài)之后,在第一次繪制 render() 之前役首〕⒇ぃ可以在這里做一些業(yè)務(wù)初始化操作和一次消耗內(nèi)存的操作,也可以設(shè)置組件狀態(tài)衡奥。
注意:這個函數(shù)在整個生命周期中只被調(diào)用一次,也是在渲染之前唯一一次能夠改變state的一個函數(shù)爹袁。
render
ReactComponent render()
render()
方法是必須的。
當(dāng)該方法被回調(diào)的時(shí)候矮固,會檢測 this.props
和 this.state
失息,并返回一個單子級組件。該子級組件可以是虛擬的本地 DOM 組件(比如 <div />
或者 React.DOM.div()
)档址,也可以是自定義的復(fù)合組件盹兢。
你也可以返回 null
或者 false
來表明不需要渲染任何東西。實(shí)際上守伸,React 渲染一個<noscript>
標(biāo)簽來處理當(dāng)前的差異檢查邏輯绎秒。當(dāng)返回 null
或者 false
的時(shí)候,this.getDOMNode()
將返回 null
尼摹。
render()
函數(shù)應(yīng)該是純粹的见芹,也就是說該函數(shù)不修改組件的 state
,每次調(diào)用都返回相同的結(jié)果蠢涝,不讀寫 DOM 信息玄呛,也不和瀏覽器交互(例如通過使用 setTimeout
)。如果需要和瀏覽器交互和二,在 componentDidMount()
中或者其它生命周期方法中做這件事徘铝。保持 render()
純粹,可以使服務(wù)器端渲染更加切實(shí)可行儿咱,也使組件更容易被理解庭砍。
注意:不要在
render()
函數(shù)中做復(fù)雜的操作场晶,更不要進(jìn)行網(wǎng)絡(luò)請求混埠,數(shù)據(jù)庫讀寫,I/O等操作诗轻。
componentDidMount
在組件第一次繪制之后钳宪,會調(diào)用 componentDidMount() ,通知組件已經(jīng)加載完成。這個函數(shù)調(diào)用的時(shí)候吏颖,其虛擬 DOM 已經(jīng)構(gòu)建完成搔体,你可以在這個函數(shù)開始獲取其中的元素或者子組件了。需要注意的是半醉,RN 框架是先調(diào)用子組件的 componentDidMount() 疚俱,然后調(diào)用父組件的函數(shù)。從這個函數(shù)開始缩多,就可以和 JS 其他框架交互了呆奕,例如設(shè)置計(jì)時(shí) setTimeout 或者 setInterval ,或者發(fā)起網(wǎng)絡(luò)請求衬吆。
注意:這個函數(shù)也是只被調(diào)用一次梁钾。這個函數(shù)之后,就進(jìn)入了穩(wěn)定運(yùn)行狀態(tài)逊抡,等待事件觸發(fā)姆泻。
componentWillReceiveProps
在組件接收到新的 props 的時(shí)候調(diào)用componentWillReceiveProps() 。在初始化渲染的時(shí)候冒嫡,該方法不會調(diào)用拇勃。
用此函數(shù)可以作為 react 在 prop 傳入之后, render() 渲染之前更新 state 的機(jī)會孝凌。老的 props 可以通過 this.props 獲取到潜秋。在該函數(shù)中調(diào)用 this.setState() 將不會引起第二次渲染。
componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}
注意:
這里調(diào)用更新狀態(tài)是安全的胎许,并不會觸發(fā)額外的 render() 調(diào)用峻呛。
shouldComponentUpdate
shouldComponentUpdate(object nextProps, object nextState): 在接收到新的 props 或者 state,將要渲染之前調(diào)用辜窑,該方法在初始化渲染的時(shí)候不會調(diào)用钩述,在使用 forceUpdate 方法的時(shí)候也不會。如果確定新的 props 和 state 不會導(dǎo)致組件更新穆碎,則此處應(yīng)該 返回 false牙勘。
注意:重寫次方你可以根據(jù)實(shí)際情況,來靈活的控制組件當(dāng) props 和 state 發(fā)生變化時(shí)是否要重新渲染組件所禀。
componentWillUpdate
componentWillUpdate(object nextProps, object nextState):在接收到新的 props 或者 state 之前立刻調(diào)用方面。在初始化渲染的時(shí)候該方法不會被調(diào)用。使用該方法做一些更新之前的準(zhǔn)備工作色徘。
注意:你不能在該方法中使用 this.setState()恭金。如果需要更新 state 來響應(yīng)某個 prop 的改變,請使用
componentWillReceiveProps
褂策。
componentDidUpdate
componentDidUpdate(object prevProps, object prevState): 在組件的更新已經(jīng)同步到 DOM 中之后立刻被調(diào)用横腿。
注意:該方法不會在初始化渲染的時(shí)候調(diào)用颓屑。使用該方法可以在組件更新之后操作 DOM 元素。
componentWillUnmount
componentWillUnmount:在組件從 DOM 中移除的時(shí)候立刻被調(diào)用耿焊。
注意:在該方法中執(zhí)行任何必要的清理揪惦,比如無效的定時(shí)器,或者清除在 componentDidMount 中創(chuàng)建的 DOM 元素罗侯。