1 前言
大家都知道React Native其实是由很多组件构成,开发RN界面的过程就是合理的组织各个组件的过程,在这其中需要不断的拆分和优化组件。因此理解RN组件的生命周期很重要,这样我们才能合理的在组件中进行我们的事务。
2 React Native组件生命周期
RN组件的生命周期分为四个阶段 分别是:创建阶段 实例化阶段 运行(更新)阶段 销毁阶段
整体流程图如下(借用别人的图)
下面分别介绍各个组件的生命周期
3 创建阶段
创建阶段主要发生在创建组件类的时候,在这个阶段中主要是初始化组件的属性类型和默认属性,例如组件的props的初始化,和一些变量的初始化
一般在这个阶段中主要做的工作如下:
初始化props,在ES6中定义静态的方法来初始化props
//定义默认属性
static defaultProps = {
autoPlay:false,
maxLoops:10,
};
//定义proTypes
static propTypes = {
autoPlay:PropTypes.bool.isRequired,
maxLoops:PropTypes.number.isRequired,
};
注意:初始化一般只执行一次,这一点与java中类的初始化类似
4 实例化阶段
实例化阶段主要从构造函数开始,主要进行组件的实例化过程,包括加载,渲染等
1 constructor(props)
这里是对控件的一些状态进行初始化,由于该函数不同于defaultProps,在以后的过程中,会再次调用,所以可以将控制控件的状态的一些变量放在这里初始化。
主要用于state的定义和初始化。
在ES6里,通过constructor(构造器)对状态进行初始化
//组件实例化时调用 可调用多次
constructor(props){
super(props);
console.log("constructor");
this.state = {
loopsRemaining:this.props.maxLoops,
};
}
2 componentWillMount()
该函数表示组件将要被加载的回调,该函数的调用在组件初始化了状态即调用构造函数之后,并且在render()之前。
主要用于进行一些业务的初始化。
函数只调用依次,如果调用setState(),其结果可以被render()看到
//实例化 准备加载组件
componentWillMount() {
console.log('componentWillMount');
}
3 render()
render是一个组件必须有的方法,形式为一个函数,渲染界面,并返回JSX或其他组件来构成DOM,和Android的XML布局、WPF的XAML布局类似,只能返回一个顶级元素。
render() {
console.log("render()");
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
<Greeting name='React 1'/>
<Greeting name='React 2'/>
<Greeting name='React 3'/>
<TouchableHighlight onPress={this._onPressButton}>
<Text>Button</Text>
</TouchableHighlight>
</View>
);
}
render主要用于渲染界面,因此这个函数和UI相关,一般会用JSX语言来插入各种组件,以实现整个页面的构建
4 componentDidMount()
该函数在render()之后,表示组件已经被加载完成。这个函数调用时表示其虚拟 DOM 已经构建完成,你可以在这个函数开始获取其中的元素或者子组件了。需要注意的是,RN 框架是先调用子组件的 componentDidMount(),然后调用父组件的函数。从这个函数开始,就可以和 JS 其他框架交互了,例如设置计时 setTimeout 或者 setInterval,或者发起网络请求。这个函数也是只被调用一次。这个函数之后,就进入了稳定运行状态,等待事件触发。
componentDidMount() {
console.log('componentDidMount');
}
到这里整个实例化阶段就算完成了,我们来看各个函数的调用过程,运行效果如下:
注意各个函数调用顺序。
接下来就是运行阶段了,运行阶段会等待事件的出发,一旦出发事件,将会有运行阶段的流程。
5 运行阶段
运行阶段在实例化阶段之后,运行阶段主要发生在用户操作之后,或者父组件有更新时,此时子组件需要进行相应的事件出发。
触发流程如下:
1 componentWillReceiveProps(nextProps)
当组件接收到新的props时,会触发该函数。在该函数中,通常可以调用setState()来完成对state的修改。
注意:属性一般是父组件传递给子组件的,
//在组件渲染完成之后,当reactNative组件接受到新的props时,这个函数将被调用,这个函数接受一个object参数,object里时新的props。
componentWillReceiveProps(nextProps) {
this.setState({loopsRemaining:nextProps.maxLoops});
console.log('componentWillReceiveProps' + nextProps.value);
}
输入参数 nextProps 是即将被设置的属性,旧的属性还是可以通过 this.props 来获取。在这个回调函数里面,你可以根据属性的变化,通过调用 this.setState() 来更新你的组件状态,这里调用更新状态是安全的,并不会触发额外的 render() 调用。如下
2 shouldComponentUpdate(nextProps, nextState)
表示组件是否需要更新,该函数返回布尔值(决定是否需要更新组件),当不需要更新时可以复写该函数返回false
//返回布尔值(决定是否需要更新组件)
shouldComponentUpdate(nextProps,nextState){
console.log("shouldComponentUpdate");
return true;
}
输入参数 nextProps 和上面的 componentWillReceiveProps 函数一样,nextState 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件,如果 true 表示需要更新,继续走后面的更新流程。否者,则不更新,直接进入等待状态。
默认情况下,这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。在大型项目中,你可以自己重载这个函数,通过检查变化前后属性和状态,来决定 UI 是否需要更新,能有效提高应用性能。
3 componentWillUpdate(nextProps, nextState)
当组件需要更新时,就会回调该函数,然后就会调用render()更新组件
//组件将要更新
componentWillUpdate(nextProps, nextState){
console.log("componentWillUpdate");
}
输入参数与 shouldComponentUpdate 一样,在这个回调中,可以做一些在更新界面之前要做的事情。需要特别注意的是,在这个函数里面,你就不能使用 this.setState 来修改状态。这个函数调用之后,就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中。紧接着这个函数,就会调用 render() 来更新界面了。
4 render()
再确定需要更新组件时,调用render,根据diff算法,渲染界面,生成需要更新的虚拟DOM数据。
5 componentDidUpdate()
虚拟DOM同步到DOM中后,执行该方法,可以在这个方法中做DOM操作。
//组件已经更新
componentDidUpdate() {
console.log("componentDidUpdate");
}
除了首次render之后调用componentDidMount,其它render结束之后都是调用componentDidUpdate。
componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以对应起来。区别在于,前者只有在挂载的时候会被调用;而后者在以后的每次更新渲染之后都会被调用。
注意:绝对不要在componentWillUpdate和componentDidUpdate中调用this.setState方法,否则将导致死循环
整个运行阶段结果如下:
6 销毁阶段
当组件不需要存在时,就会进行组件的销毁阶段,该阶段只有一个方法componentWillUnmount()
1 componentWillUnmount()
该方法中做一些组件清除的工作,比如销毁定时器等,取消网络请求等
//销毁阶段 组件将要销毁
componentWillUnmount(){
console.log("componentWillUnmount");
}
7 RN 组件生命周期总结
根据前面的RN生命周期介绍,下面总结一下各个生命周期的调用次数和能否使用setState()来改变状态
总结:RN组件的生命周期还是比较清晰的,与Activity最大的区别就是将实例化阶段和后续的更新阶段分开了。