前言
本篇的重点如下
- 组件的生命周期
- 组件的属性和状态
- 获取真实的DOM节点
一、组件的生命周期
ReactNative组件的声明周期大致上可以划分为实例化阶段、存在阶段、销毁阶段
最常用的为实例化阶段，该阶段就是组件的构建、展示时期，需要我们根据几个函数的调用过程，控制好组件的展示和逻辑的处理
-
实例化阶段函数功能分析
1) getDefaultProps
a. 该函数用于初始化一些默认的属性，通常会将固定的内容放在这个函数中进行赋值 b. 在组件中，可以利用this.props获取这里属性，由于组件初始化后，再次使用该组件不会调用getDefaultProps函数，所以组件自己不可以自己修改props，只可有其他组件调用它时在外部修改 c. 使用组件时，可以自定义属性，在该组件内部使用this.props.xxx获取到2) getInitialState
a. 该函数是用于对组件的一些状态进行初始化，由于该函数不同于getDefaultProps,在以后的过程中，会再次调用，所以可以将控制控件的状态的一些变量放在这里初始化，如控件上显示的文字，可以通过this.state来获取值，通过this.setState来修改state值，比如 this.setState({ activePage: activePage, }); b. 一旦调用了this.setState方法，组件一定会调用render方法，对组件再次进行渲染，不过，react框架会自动根据DOM的状态来判断是否需要真正的渲染3) componentWillMount
在组件将要被加载在视图之前调用，功能相对较少4) render(每次页面发生变化都会调用该函数)
a. render是一个组件中必须有的方法，本质上是一个函数，并返回JSX或其他组件来构成DOM,和Android的XML布局类似，只能返回一个顶级元素 b. 在render函数中，只可通过this.state和this.props来访问在之前函数中初始化的数据值5) componentDidMount
a. 在调用了render方法后，组件加载成功并被成功渲染出来以后，所要执行的后续操作，一般会在这个函数中处理网络请求等加载数据的操作 b. 因为UI已经成功被渲染出来，所以放在这个函数里进行请求操作，不会出现UI上的操作 -
存在期阶段函数功能分析
1) componentWillReceiveProps
已加载组件收到新的参数时调用2) shouldComponentUpdate
一般用于优化，可以返回false或true来控制是否进行渲染3) componentWillUpdate
组件刷新前调用，类似componentWillMount4) componentDidUpdate
组件更新结束之后执行，在初始化render时不执行 -
销毁期阶段函数功能分析
componentWillUnmount
用于清理一些无用的内容，如：点击事件Listener -
注意
a. this.props表示那些一旦定义，就不再改变的特性 b. this.state是会随着用户互动而产生变化的特性
二、组件的属性和状态
属性和状态其实在生命周期中我们已经提到，但由于他真的特别重要，在这里我们单独再学习一下。
-
组件的属性
1) 使用getDefaultProps函数来设置组件的属性
var myView = React.createClass({ //通过getDefaultProps设置组件的属性对象 getDefaultProps(){ return { props1Name:"", } }, render(){ return ( <View> <Text>{{this.props.props1Name}}</Text> </View> ) } }); 属性一旦定义，就不再改变，通过this.props.props1Name来获取getDefaultProps中定义的属性对象的值
2) 通过自定义属性来设置组件的属性
//自定义组件
var MyView = React.createClass({
render(){
return(
<View>
<Text>{{this.props.props1Name}}</Text>
</View>
)
}
});
//使用自定义组件myView时给组件设置自定义的属性，也可以通过this.props来获取到该值
var TestView = React.createClass({
render(){
return(
{/*给myView设置自定义属性*/}
<MyView props1Name="test"></MyView>
}
)
}
})
AppRegistry.registerComponent('demo1', () => TestView);
#### 3. 组件的状态
var MyView = React.createClass({
//通过getInitialState设置组件的状态对象
getInitialState(){
return {
value:"",
}
},
render(){
<View>
<Text>{{this.state.value}}</Text>
</View>
}
});
状态定义过后，可以通过this.state.value来获取getInitialState中定义的状态对象的值，也可以通过this.setState({ value:"test", })来修改状态值
三、获取真实的DOM节点
1. JSX
<TextInput ref="myTextInput">
2. JS
this.refs.myTextInput
四、声明周期和
获取DOM节点的案例和注释见Demo1
11.png
