React Native组件的生命周期

828 查看

React Native组件的生命周期

可以说整个React Native应用是由各种类型的组件构成。而每个组件都有其各自的生命周期。组件由初生到消亡，React Native框架通过不同的生命周期方法，为我们提供了方便切入组件生命周期的钩子，让我们可以在正确的时间点做正确的事情。

当应用启动，React Native框架在内存中维护着一个虚拟DOM树。所谓组件的生命周期即由组件初始化并挂载到虚拟DOM为起始，到组件由虚拟DOM卸载为终结，组件的不同状态。生命周期方法则是组件在虚拟DOM树不同状态的描述。

理解组件的生命周期方法是理解组件生命周期的关键，现在就让我们来详细探究组件的生命周期方法。

生命周期方法

组件的生命周期方法对应着组件的不同生命阶段，通常我们分为三个阶段：组件初始化及挂载阶段、组件运行期阶段及组件卸载阶段。

初始化及挂载阶段

一、这是组件类的构造函数，通常在此初始化state数据模型。

constructor(props) {
  super(props);
  this.state = {
    //key : value
  };
}

二、表示组件将要加载到虚拟DOM，在render方法之前执行，整个生命周期只执行一次。

componentWillMount() {

}

三、表示组件已经加载到虚拟DOM，在render方法之后执行，整个生命周期只执行一次。通常在该方法中完成异步网络请求或者集成其他JavaScript库。

componentDidMount() {

}

运行期阶段

一、在组件接收到其父组件传递的props的时候执行,参数为父组件传递的props。在组件的整个生命周期可以多次执行。通常在此方法接收新的props值，重新设置state。

componentWillReceiveProps(nextProps) {
  this.setState({
    //key : value
  });
}

二、在componentWillReceiveProps(nextProps)执行之后立刻执行；或者在state更改之后立刻执行。该方法包含两个参数，分别是props和state。该方法在组件的整个生命周期可以多次执行。如果该方法返回false，则componentWillUpdate(nextProps, nextState)及其之后执行的方法都不会执行，组件则不会进行重新渲染。

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

二、在shouldComponentUpdate(nextProps, nextState)函数执行完毕之后立刻调用，该方法包含两个参数，分别是props和state。render()函数执行之前调用。该方法在组件的整个生命周期可以多次执行。

componentWillUpdate(nextProps, nextState) {

}

三、在render()方法执行之后立刻调用。该方法包含两个参数，分别是props和state。该方法在组件的整个生命周期可以多次执行。

componentDidUpdate(preProps, preState) {

}

四、render方法用于渲染组件。在初始化阶段和运行期阶段都会执行。

render() {
  return(
    <View/>
  );
}

卸载阶段

一、在组件由虚拟DOM卸载的时候调用。

componentWillUnmount() {

}

生命周期方法的执行流

下面我们通过实例来演示上述生命周期方法在整个React Native应用具体的执行流程，让大家对React Native应用数据流动以及组件的渲染过程有更加清晰的认识。

初始化组件

现在我们来初始化一个名为itemView的组件，观察哪些生命周期方法会在组件初始化的时候执行以及它们的执行顺序。

lifecycle.png

上图点击创建View的button，会初始化一个View组件在屏幕上，然后切换到控制台可以看到组件在初始化的时候方法的执行顺序。

001.png

如图，可以看到在初始化itemView的时候，依次调用constructor、componentWillMount、render和componentDidMount，而其他方法则不会调用。

卸载组件

现在我们删除刚才创建的itemView，观察哪些方法会执行。

002.png

如图，可以看到只有componentWillUnmount方法会执行。通常在该方法清理定时器或者监听。

更改state

我们在itemView内部设置一个定时器，过5秒自动更改state的item属性的值为'reRender'，观察哪些方法执行。

this.timer = setTimeout(() => {
  this.setState({
    item:'reRender'
  });
}, 5000);

003.png

如图，shouldComponentUpdate、componentWillUpdate、render和componentDidUpdate执行。并且itemView的propsr仍然是初始化时候的值create，而state则改变为reRender。

传递props

最后，我们由父组件向itemView传递props，值为reset。

004.png

如图，可以看到当父组件向子组件传递props的时候，componentWillReceiveProps会被调用，并且输出传递的props的值。

以上就是组件的生命周期方法在不同的情况下的执行流程。上面的情况已经基本包括React Native应用组件活动的全部状态。

生命周期方法的完整流程图

下图是组件的生命周期方法完整的流程，通过这张图以及上面的解释，我们可以对生命周期方法有一个完整的认识。

React Native组件的生命周期.png

理解组件的生命周期不仅能够帮助我们更好的运用组件构建应用，更是优化React Native应用组件渲染性能的关键，希望通过本文抛砖引玉，希望大家能够对组件的生命周期有更深入的理解。