今天小編為大家分享有關(guān)于“react native生命周期詳解!”這方面的相關(guān)內(nèi)容,希望小編的分享對(duì)大家的學(xué)習(xí)和了解有所幫助!
我們先來看看下面這個(gè)有關(guān)于 react native 生命周期的流程圖,如下所示:
在上面這個(gè)流程圖中我們可以了解到,在 react native 生命周期中分為三個(gè)階段。
階段一:實(shí)例化階段函數(shù)功能分析
1、 getDefaultProps:在這個(gè)組件中我們可以通過使用 ?this.props
? 獲取初始化它的屬性,而且在組件初始化后,再次使用這個(gè)組件是不會(huì)調(diào)用?getDefaultProps
?函數(shù),所以組件自己不可以修改?props
?,只可由其他組件調(diào)用它時(shí)再外部進(jìn)行修改。
2、getInitialState:這個(gè)函數(shù)用于對(duì)組件部分狀態(tài)進(jìn)行初始化,而且該函數(shù)不同于 ?getDefaultProps
? ,在之后的過程中我們會(huì)再次調(diào)用,所以可以將控制控件狀態(tài)的一些變量放在這里初始化(比如控件上顯示的文字,可以通過this.state來獲取值,通過this.setState來修改state值。)
注意:而且一旦調(diào)用了?this.setState
?方法,組件一定會(huì)調(diào)用 ?render
?方法,對(duì)組件進(jìn)行再次渲染,不過,React 框架會(huì)根據(jù) DOM的狀態(tài)自動(dòng)判斷是否需要真正渲染。
下面我們來看看下面相關(guān)的代碼:
constructor(props) {
super(props);
this.state = {
clickText: "開始點(diǎn)擊按鈕",
count: 1,
detailContent: true
}
}
...
clickButton(){
const { count } = this.state;
this.setState({
clickText: "我點(diǎn)擊了按鈕",
count: count + 1,
detailContent: false
})
}
render() {
console.log("render1111");
return (
<View style={styles.container}>
<Text>歡迎來到首頁(yè)</Text>
<TouchableOpacity
onPress={() => Actions.notice()}
>
<Text>跳轉(zhuǎn)到公告頁(yè)</Text>
</TouchableOpacity>
<Text style={{color: 'blue', fontSize: 40}}>{this.state.count}</Text>
<TouchableOpacity
style={styles.button}
onPress={() => this.clickButton()}
>
<Text>{this.state.clickText}</Text>
</TouchableOpacity>
<HomeDetails detailContent={this.state.detailContent}/>
</View>
)
}
3、componentWillMount: 組件將要被加載到視圖之前調(diào)用
4、componentDidMount: 在這個(gè)方法中調(diào)用了render方法,組件加載成功并被成功渲染出來之后,所要執(zhí)行的后續(xù)操作,一般都會(huì)在這個(gè)函數(shù)中進(jìn)行。
階段二:存在階段函數(shù)功能分析
shouldComponentUpdate:一般用于優(yōu)化,可以返回false或true來控制是否進(jìn)行渲染(true 的話進(jìn)行下2步操作,false不會(huì)進(jìn)行下去)
componentWillUpdate: 組件刷新前調(diào)用
componentDidUpdate:更新后
shouldComponentUpdate(nextProps, nextState){
console.log(this.state.detailContent,'detailContent');
if (this.state.count !== nextState.count) {
console.log("shouldComponentUpdate1111---組件需要更新");
return true;
}
return false;
}
componentWillUpdate(){
console.log("componentWillUpdate1111---組件將要更新");
}
componentDidUpdate(){
console.log("componentDidUpdate1111---組件更新完畢");
}
componentWillReceiveProps:指父元素對(duì)組件的props或state進(jìn)行了修改
// 在子組件中對(duì)父元素props或state的改變進(jìn)行監(jiān)聽進(jìn)行相應(yīng)的操作
componentWillReceiveProps(nextProps){
console.log(this.props.detailContent,'this--->>componentWillReceiveProps');
console.log(nextProps.detailContent,'next--->>componentWillReceiveProps')
}
// componentWillReceiveProps -> 改變后執(zhí)行父組件中 shouldComponentUpdate -> componentWillUpdate -> componentDidUpdate
階段三:銷毀階段函數(shù)功能分析
componentWillUnmount
用于清理一些無用的內(nèi)容,比如:定時(shí)器清除
下面為大家介紹一些我們?nèi)粘3S玫闹R(shí)點(diǎn):
this.state:開發(fā)中,組件肯定要與用戶進(jìn)行交互,React 的一大創(chuàng)新就是將組件看成了一個(gè)狀態(tài)機(jī),一開始有一個(gè)初始狀態(tài),然后用戶交互,導(dǎo)致狀態(tài)變化,從而觸發(fā)重新渲染UI。
1、當(dāng)用戶點(diǎn)擊組件,導(dǎo)致狀態(tài)變化,this.setSate方法就修改狀態(tài)值,每次修改以后,會(huì)自動(dòng)調(diào)用this.render方法,再次渲染組件
2、可以把組件看成一個(gè)狀態(tài)機(jī),根據(jù)不同的status有不同的UI展示,只要使用setState改變狀態(tài)值,根據(jù)diff算法算出有差值后,就會(huì)執(zhí)行ReactDom的render方法,重新渲染界面
3、由于this.props和this.state都用于描述組件的特性,可能會(huì)產(chǎn)生混淆,一個(gè)簡(jiǎn)單的區(qū)分方法就是---this.props表示那些一旦定義,就不再更改的特性,而this.state是會(huì)隨著用戶交互而產(chǎn)生改變的特性
獲取真實(shí)的Dom節(jié)點(diǎn):
1、在React Native中,組件并不是真實(shí)的DOM節(jié)點(diǎn),而是存在于內(nèi)存中的一種數(shù)據(jù)結(jié)構(gòu),叫虛擬DOM
2、只有當(dāng)它插入文檔后,才會(huì)變成真實(shí)的DOM
3、根據(jù)React的設(shè)計(jì),所有DOM變動(dòng),都現(xiàn)在虛擬DOM上發(fā)生,然后再將實(shí)際發(fā)生變動(dòng)的部分,反映在真實(shí)DOM上,這種算法叫做DOM diff,它可以極大提高網(wǎng)頁(yè)的性能表現(xiàn)。
4、有時(shí)需要從組建獲取真實(shí)DOM節(jié)點(diǎn),這時(shí)就需要到ref屬性
以上就是有關(guān)于:“react native生命周期詳解!”這方面的相關(guān)內(nèi)容分享,更多有關(guān)于 react native 這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解!