getDefaultProps
object getDefaultProps()
執(zhí)行過(guò)一次后,被創(chuàng)建的類(lèi)會(huì)有緩存豁陆,映射的值會(huì)存在this.props,前提是這個(gè)prop不是父組件指定的
這個(gè)方法在對(duì)象被創(chuàng)建之前執(zhí)行,因此不能在方法內(nèi)調(diào)用this.props ,另外炫掐,注意任何getDefaultProps()返回的對(duì)象在實(shí)例中共享,不是復(fù)制
設(shè)置訪問(wèn)屬性為true
getInitialState
object getInitialState()
控件加載之前執(zhí)行睬涧,返回值會(huì)被用于state的初始化值
componentWillMount
void componentWillMount()
執(zhí)行一次募胃,在初始化render之前執(zhí)行旗唁,如果在這個(gè)方法內(nèi)調(diào)用setState,render()知道state發(fā)生變化痹束,并且只執(zhí)行一次
render
ReactElement render()
render的時(shí)候會(huì)調(diào)用render()會(huì)被調(diào)用
調(diào)用render()方法時(shí)检疫,首先檢查this.props和this.state返回一個(gè)子元素,子元素可以是DOM組件或者其他自定義復(fù)合控件的虛擬實(shí)現(xiàn)
如果不想渲染可以返回null或者false祷嘶,這種場(chǎng)景下电谣,react渲染一個(gè)<noscript>標(biāo)簽,當(dāng)返回null或者false時(shí)抹蚀,ReactDOM.findDOMNode(this)返回null
render()方法是很純凈的剿牺,這就意味著不要在這個(gè)方法里初始化組件的state,每次執(zhí)行時(shí)返回相同的值环壤,不會(huì)讀寫(xiě)DOM或者與服務(wù)器交互晒来,如果必須如服務(wù)器交互,在componentDidMount()方法中實(shí)現(xiàn)或者其他生命周期的方法中實(shí)現(xiàn)郑现,保持render()方法純凈使得服務(wù)器更準(zhǔn)確湃崩,組件更簡(jiǎn)單
componentDidMount
void componentDidMount()
在初始化render之后只執(zhí)行一次,在這個(gè)方法內(nèi)接箫,可以訪問(wèn)任何組件攒读,componentDidMount()方法中的子組件在父組件之前執(zhí)行
從這個(gè)函數(shù)開(kāi)始,就可以和 js 其他框架交互了辛友,例如設(shè)置計(jì)時(shí) setTimeout 或者 setInterval薄扁,或者發(fā)起網(wǎng)絡(luò)請(qǐng)求
shouldComponentUpdate
boolean shouldComponentUpdate(
object nextProps, object nextState
)
這個(gè)方法在初始化render時(shí)不會(huì)執(zhí)行,當(dāng)props或者state發(fā)生變化時(shí)執(zhí)行废累,并且是在render之前邓梅,當(dāng)新的props或者state不需要更新組件時(shí),返回false
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id;
}
當(dāng)shouldComponentUpdate方法返回false時(shí)邑滨,講不會(huì)執(zhí)行render()方法日缨,componentWillUpdate和componentDidUpdate方法也不會(huì)被調(diào)用
默認(rèn)情況下,shouldComponentUpdate方法返回true防止state快速變化時(shí)的問(wèn)題掖看,但是如果·state不變匣距,props只讀,可以直接覆蓋shouldComponentUpdate用于比較props和state的變化哎壳,決定UI是否更新毅待,當(dāng)組件比較多時(shí),使用這個(gè)方法能有效提高應(yīng)用性能
componentWillUpdate
void componentWillUpdate(
object nextProps, object nextState
)
當(dāng)props和state發(fā)生變化時(shí)執(zhí)行耳峦,并且在render方法之前執(zhí)行恩静,當(dāng)然初始化render時(shí)不執(zhí)行該方法,需要特別注意的是,在這個(gè)函數(shù)里面驶乾,你就不能使用this.setState來(lái)修改狀態(tài)邑飒。這個(gè)函數(shù)調(diào)用之后,就會(huì)把nextProps和nextState分別設(shè)置到this.props和this.state中级乐。緊接著這個(gè)函數(shù)疙咸,就會(huì)調(diào)用render()來(lái)更新界面了
componentDidUpdate
void componentDidUpdate(
object prevProps, object prevState
)
組件更新結(jié)束之后執(zhí)行,在初始化render時(shí)不執(zhí)行
componentWillReceiveProps
void componentWillReceiveProps(
object nextProps
)
當(dāng)props發(fā)生變化時(shí)執(zhí)行风科,初始化render時(shí)不執(zhí)行撒轮,在這個(gè)回調(diào)函數(shù)里面,你可以根據(jù)屬性的變化贼穆,通過(guò)調(diào)用this.setState()來(lái)更新你的組件狀態(tài)题山,舊的屬性還是可以通過(guò)this.props來(lái)獲取,這里調(diào)用更新?tīng)顟B(tài)是安全的,并不會(huì)觸發(fā)額外的render調(diào)用
componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}
componentWillUnmount
void componentWillUnmount()
當(dāng)組件要被從界面上移除的時(shí)候故痊,就會(huì)調(diào)用componentWillUnmount(),在這個(gè)函數(shù)中顶瞳,可以做一些組件相關(guān)的清理工作,例如取消計(jì)時(shí)器愕秫、網(wǎng)絡(luò)請(qǐng)求等
總結(jié)
ReactNative的生命周期就介紹完了慨菱,其中最上面的虛線框和右下角的虛線框的方法一定會(huì)執(zhí)行,左下角的方法根據(jù)props state是否變化去執(zhí)行戴甩,其中建議只有在componentWillMount,componentDidMount,componentWillReceiveProps方法中可以修改state值