React Native中的component跟Android中的activity许赃,fragment等一樣,存在生命周期使套,下面先給出component的生命周期圖
getDefaultProps
object getDefaultProps()
執(zhí)行過一次后美尸,被創(chuàng)建的類會有緩存,映射的值會存在this.props
,前提是這個prop不是父組件指定的
這個方法在對象被創(chuàng)建之前執(zhí)行骄瓣,因此不能在方法內(nèi)調(diào)用this.props
停巷,另外,注意任何getDefaultProps()
返回的對象在實例中共享,不是復(fù)制
getInitialState
object getInitialState()
控件加載之前執(zhí)行畔勤,返回值會被用于state的初始化值
componentWillMount
void componentWillMount()
執(zhí)行一次蕾各,在初始化render
之前執(zhí)行,如果在這個方法內(nèi)調(diào)用setState
庆揪,render()
知道state發(fā)生變化式曲,并且只執(zhí)行一次
render
ReactElement render()
render的時候會調(diào)用render()
會被調(diào)用
調(diào)用render()
方法時,首先檢查this.props
和this.state
返回一個子元素缸榛,子元素可以是DOM組件或者其他自定義復(fù)合控件的虛擬實現(xiàn)
如果不想渲染可以返回null或者false吝羞,這種場景下,React渲染一個<noscript>
標(biāo)簽仔掸,當(dāng)返回null或者false時,ReactDOM.findDOMNode(this)
返回nullrender()
方法是很純凈的医清,這就意味著不要在這個方法里初始化組件的state起暮,每次執(zhí)行時返回相同的值,不會讀寫DOM或者與服務(wù)器交互会烙,如果必須如服務(wù)器交互负懦,在componentDidMount()
方法中實現(xiàn)或者其他生命周期的方法中實現(xiàn),保持render()
方法純凈使得服務(wù)器更準(zhǔn)確柏腻,組件更簡單
componentDidMount
void componentDidMount()
在初始化render之后只執(zhí)行一次纸厉,在這個方法內(nèi),可以訪問任何組件五嫂,componentDidMount()
方法中的子組件在父組件之前執(zhí)行
從這個函數(shù)開始颗品,就可以和 JS 其他框架交互了,例如設(shè)置計時 setTimeout 或者 setInterval沃缘,或者發(fā)起網(wǎng)絡(luò)請求
shouldComponentUpdate
boolean shouldComponentUpdate(
object nextProps, object nextState
)
這個方法在初始化render
時不會執(zhí)行躯枢,當(dāng)props或者state發(fā)生變化時執(zhí)行,并且是在render
之前槐臀,當(dāng)新的props
或者state
不需要更新組件時锄蹂,返回false
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id;
}
當(dāng)shouldComponentUpdate
方法返回false時,講不會執(zhí)行render()
方法水慨,componentWillUpdate
和componentDidUpdate
方法也不會被調(diào)用
默認(rèn)情況下得糜,shouldComponentUpdate
方法返回true防止state
快速變化時的問題,但是如果·state
不變晰洒,props
只讀朝抖,可以直接覆蓋shouldComponentUpdate
用于比較props
和state
的變化,決定UI是否更新谍珊,當(dāng)組件比較多時槽棍,使用這個方法能有效提高應(yīng)用性能
componentWillUpdate
void componentWillUpdate(
object nextProps, object nextState
)
當(dāng)props
和state
發(fā)生變化時執(zhí)行,并且在render
方法之前執(zhí)行,當(dāng)然初始化render時不執(zhí)行該方法炼七,需要特別注意的是缆巧,在這個函數(shù)里面,你就不能使用this.setState
來修改狀態(tài)豌拙。這個函數(shù)調(diào)用之后陕悬,就會把nextProps
和nextState
分別設(shè)置到this.props
和this.state
中。緊接著這個函數(shù)按傅,就會調(diào)用render()
來更新界面了
componentDidUpdate
void componentDidUpdate(
object prevProps, object prevState
)
組件更新結(jié)束之后執(zhí)行捉超,在初始化render
時不執(zhí)行
componentWillReceiveProps
void componentWillReceiveProps(
object nextProps
)
當(dāng)props
發(fā)生變化時執(zhí)行,初始化render
時不執(zhí)行唯绍,在這個回調(diào)函數(shù)里面拼岳,你可以根據(jù)屬性的變化,通過調(diào)用this.setState()
來更新你的組件狀態(tài)况芒,舊的屬性還是可以通過this.props
來獲取,這里調(diào)用更新狀態(tài)是安全的惜纸,并不會觸發(fā)額外的render
調(diào)用
componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}
componentWillUnmount
void componentWillUnmount()
當(dāng)組件要被從界面上移除的時候,就會調(diào)用componentWillUnmount()
,在這個函數(shù)中绝骚,可以做一些組件相關(guān)的清理工作耐版,例如取消計時器、網(wǎng)絡(luò)請求等
總結(jié)
React Native的生命周期就介紹完了压汪,其中最上面的虛線框和右下角的虛線框的方法一定會執(zhí)行粪牲,左下角的方法根據(jù)props
state
是否變化去執(zhí)行,其中建議只有在componentWillMount
,componentDidMount
,componentWillReceiveProps
方法中可以修改state
值
英文地址:https://facebook.github.io/react/docs/component-specs.html#lifecycle-methods