前言
本篇的重點(diǎn)如下
- 組件的生命周期
- 組件的屬性和狀態(tài)
- 獲取真實(shí)的DOM節(jié)點(diǎn)
一、組件的生命周期
ReactNative組件的聲明周期大致上可以劃分為實(shí)例化階段、存在階段、銷毀階段
最常用的為實(shí)例化階段，該階段就是組件的構(gòu)建、展示時(shí)期，需要我們根據(jù)幾個(gè)函數(shù)的調(diào)用過程，控制好組件的展示和邏輯的處理
-
實(shí)例化階段函數(shù)功能分析
1) getDefaultProps
a. 該函數(shù)用于初始化一些默認(rèn)的屬性，通常會(huì)將固定的內(nèi)容放在這個(gè)函數(shù)中進(jìn)行賦值 b. 在組件中，可以利用this.props獲取這里屬性，由于組件初始化后，再次使用該組件不會(huì)調(diào)用getDefaultProps函數(shù)，所以組件自己不可以自己修改props，只可有其他組件調(diào)用它時(shí)在外部修改 c. 使用組件時(shí)，可以自定義屬性，在該組件內(nèi)部使用this.props.xxx獲取到2) getInitialState
a. 該函數(shù)是用于對(duì)組件的一些狀態(tài)進(jìn)行初始化，由于該函數(shù)不同于getDefaultProps,在以后的過程中，會(huì)再次調(diào)用，所以可以將控制控件的狀態(tài)的一些變量放在這里初始化，如控件上顯示的文字，可以通過this.state來獲取值，通過this.setState來修改state值，比如 this.setState({ activePage: activePage, }); b. 一旦調(diào)用了this.setState方法，組件一定會(huì)調(diào)用render方法，對(duì)組件再次進(jìn)行渲染，不過，react框架會(huì)自動(dòng)根據(jù)DOM的狀態(tài)來判斷是否需要真正的渲染3) componentWillMount
在組件將要被加載在視圖之前調(diào)用，功能相對(duì)較少4) render(每次頁面發(fā)生變化都會(huì)調(diào)用該函數(shù))
a. render是一個(gè)組件中必須有的方法，本質(zhì)上是一個(gè)函數(shù)，并返回JSX或其他組件來構(gòu)成DOM,和Android的XML布局類似，只能返回一個(gè)頂級(jí)元素 b. 在render函數(shù)中，只可通過this.state和this.props來訪問在之前函數(shù)中初始化的數(shù)據(jù)值5) componentDidMount
a. 在調(diào)用了render方法后，組件加載成功并被成功渲染出來以后，所要執(zhí)行的后續(xù)操作，一般會(huì)在這個(gè)函數(shù)中處理網(wǎng)絡(luò)請(qǐng)求等加載數(shù)據(jù)的操作 b. 因?yàn)閁I已經(jīng)成功被渲染出來，所以放在這個(gè)函數(shù)里進(jìn)行請(qǐng)求操作，不會(huì)出現(xiàn)UI上的操作 -
存在期階段函數(shù)功能分析
1) componentWillReceiveProps
已加載組件收到新的參數(shù)時(shí)調(diào)用2) shouldComponentUpdate
一般用于優(yōu)化，可以返回false或true來控制是否進(jìn)行渲染3) componentWillUpdate
組件刷新前調(diào)用，類似componentWillMount4) componentDidUpdate
組件更新結(jié)束之后執(zhí)行，在初始化render時(shí)不執(zhí)行 -
銷毀期階段函數(shù)功能分析
componentWillUnmount
用于清理一些無用的內(nèi)容，如：點(diǎn)擊事件Listener -
注意
a. this.props表示那些一旦定義，就不再改變的特性 b. this.state是會(huì)隨著用戶互動(dòng)而產(chǎn)生變化的特性
二、組件的屬性和狀態(tài)
屬性和狀態(tài)其實(shí)在生命周期中我們已經(jīng)提到，但由于他真的特別重要，在這里我們單獨(dú)再學(xué)習(xí)一下。
-
組件的屬性
1) 使用getDefaultProps函數(shù)來設(shè)置組件的屬性
var myView = React.createClass({ //通過getDefaultProps設(shè)置組件的屬性對(duì)象 getDefaultProps(){ return { props1Name:"", } }, render(){ return ( <View> <Text>{{this.props.props1Name}}</Text> </View> ) } }); 屬性一旦定義，就不再改變，通過this.props.props1Name來獲取getDefaultProps中定義的屬性對(duì)象的值
2) 通過自定義屬性來設(shè)置組件的屬性
//自定義組件
var MyView = React.createClass({
render(){
return(
<View>
<Text>{{this.props.props1Name}}</Text>
</View>
)
}
});
//使用自定義組件myView時(shí)給組件設(shè)置自定義的屬性，也可以通過this.props來獲取到該值
var TestView = React.createClass({
render(){
return(
{/*給myView設(shè)置自定義屬性*/}
<MyView props1Name="test"></MyView>
}
)
}
})
AppRegistry.registerComponent('demo1', () => TestView);
#### 3. 組件的狀態(tài)
var MyView = React.createClass({
//通過getInitialState設(shè)置組件的狀態(tài)對(duì)象
getInitialState(){
return {
value:"",
}
},
render(){
<View>
<Text>{{this.state.value}}</Text>
</View>
}
});
狀態(tài)定義過后，可以通過this.state.value來獲取getInitialState中定義的狀態(tài)對(duì)象的值，也可以通過this.setState({ value:"test", })來修改狀態(tài)值
三、獲取真實(shí)的DOM節(jié)點(diǎn)
1. JSX
<TextInput ref="myTextInput">
2. JS
this.refs.myTextInput
四、聲明周期和
獲取DOM節(jié)點(diǎn)的案例和注釋見Demo1
11.png
