【RN - 基础】之React Native组件的生命周期
下图描述了React Native中组件的生命周期:
从上图中可以看到,React Native组件的生命周期可以分为初始化阶段、存在阶段和销毁阶段。
实例化阶段
实例化阶段是React Native组件生命周期的三个阶段中最常用的阶段,该阶段是组件的构建、展示阶段,该阶段中的几个方法的功能解析如下:
getDefaultProps:
该函数用于初始化一些默认的属性。
在组件中可以利用 this.props.* 的方式获取在这个函数中定义的属性。
注意:this.props是只读的区域,组件中不可以修改props中的属性。
getInitialState:
该函数用于对组件的一些状态进行初始化。
可以将控制组件状态的一些变量在这里初始化(通过this.state来获取值,通过this.setState来修改值)。
注意:一旦调用了this.setState方法,组件就一定会调用render函数对组件进行再次渲染,不过React框架会自动根据DOM的状态来判断是否需要真正的渲染。
render:
render函数返回JSX或其他组件来构成DOM(注意:只能返回一个顶级元素)。
在render函数中,只可以通过this.props和this.state来访问在之前的函数中初始化的数据。
componentDidMount:
在调用了render函数,组件加载成功并被成功渲染出来以后,所要执行的后续操作(如网络请求等加载数据的操作),一般会在这个函数中进行。因为UI已经被渲染出来了,所以放在这个函数中进行的请求操作,不会出现UI上的错误。
注意:如果想要在主类中书写多个生命周期函数(getInitialState等),需要使用ES 5的语法,如果使用ES 6的语法会报错。
存在阶段和销毁阶段
当程序执行完了初始化阶段最后调用的componentDidMount函数之后,程序就开始正常的运行起来,此时就进入了存在阶段。
存在阶段执行流程:
程序在运行过程中,如果对this.state或this.props进行了修改,那么就会触发存在阶段的多个函数(调用流程如上图所示)。
无论是修改this.state还是this.props,系统都会调用shouldComponentUpdate函数,判断视图是否需要渲染,如果不需要,则忽略本次状态修改,回到运行状态;如果需要,则在通过componentWillUpdate函数准备之后,重新调用render函数进行渲染。
注意:this.state使用的是状态机机制,即将组件看成一个状态机,一开始有一个初始状态,然后在用户互动的时候改变组件状态,从而触发重新渲染UI。
销毁阶段执行流程:
执行销毁阶段的情况有多种,如:当系统遇到错误而崩溃时;系统空间不足时;APP被用户推出时,等等等等。
当遇到上述问题时,系统就会进入销毁阶段,这个阶段只有一个过程:componentWillUnmount,这个方法用来清空一些无用内容,如:点击事件的Listener等。
注意:销毁阶段是程序执行的出口,只要执行了销毁阶段,就表示程序已经自然或不自然的退出了。
状态机
上面说到,在React Native生命周期初始化阶段的getInitialState方法中用到了状态机的原理,状态机原理即通过修改程序中状态机中的属性的值,来达到改变界面显示的目的。状态机的一段示例代码如下:
var BTouchableDemo = React.createClass({ getInitialState(){ return { content: '触摸事件响应器' } }, render() { return ( <View style={styles.containerStyle}> <TouchableOpacity onPress={() => this.changeResultContent('点击')} onPressIn={() => this.changeResultContent('按下')} onPressOut={() => this.changeResultContent('抬起')} onLongPress={() => this.changeResultContent('长按')}> <View style={styles.loginContainerStyle}> <Text style={styles.loginTextStyle}>TouchableOpacity</Text> </View> </TouchableOpacity> <Text style={styles.resultStyle}>{this.state.content}</Text> </View> ); }, changeResultContent(content) { this.setState({ content: content }); } });
可以看到,上面一段代码通过修改状态机中的content属性,来修改底部的Text中的文本信息。
注意:如果是要获取状态机中的属性值,则可以直接通过 this.state.* 的方式获取;如果想要设置(更新)状态机中某个属性的值,则必须要通过 this.setState 方法设置。
ES 5和ES 6代码的比较
ES 6的代码风格相对于ES 5有很大的改变,实例化阶段的几个方法(render、getDefaultProps和getInitialState)在ES 5和ES 6的代码差别很大。
使用ES 5的代码编写:
var CLifeCycle = React.createClass({ // 设置一些常量(程序中不可改变的量) getDefaultProps(){ return {name: 'Jack'}; }, // 设置状态机属性(程序中可以改变的量) getInitialState(){ return {age: 20}; }, // 渲染布局 render(){ return ( <View style={styles.containerStyle}> <Text style={styles.textStyle}>我是ES 5语法模板</Text> </View> ); } });
使用ES 6的代码编写:
export default class CLifeCycle extends Component { // 设置状态机属性(程序中可以改变的量) constructor(props) { super(props); this.state = {age: 20}; } // 渲染布局 render() { return ( <View style={styles.containerStyle}> <Text style={styles.textStyle}>我是ES 6语法模板</Text> </View> ); } } // 设置一些常量(程序中不可改变的量)的数据类型 CLifeCycle.propTypes = {name: React.PropTypes.string}; // 设置一些常量(程序中不可改变的量)的默认值 CLifeCycle.defaultProps = {name: 'Jack'};
获取真实DOM节点
在React Native中,组件并不是真正的DOM节点,而是存在于内存中的一种数据结构,叫做虚拟DOM。只有当它插入文档之后,才会称为真正的DOM。
如果想要通过组件获取真正的DOM节点,可以使用 ref 属性设置标记,然后在需要使用的地方通过 this.refs.* 访问这个组件。
posted on 2017-02-25 10:37 ITGungnir 阅读(2221) 评论(0) 编辑 收藏 举报