react-native 的生命周期

前言

在面试的时候被偶尔问到了react-native 的生命周期的问题，以前确实研究过这个过程，但是时间久了给忘了，一时语噎竟然一个完整的函数名字没说出来，当时恨不得拿出我的电脑看一下这个过程，然后根据自己的思路娓娓道来，可惜还是记不起来了，正好成这个机会总结一下，下方这张图已经完美诠释了

react-native生命周期

如上我们可以将组件的生命周期分为以下三个阶段：

• 第一阶段：是组件初始化阶段，如图中运行中之前阶段，在这里完成了组件的加载和初始化；
• 第二阶段：是组件在运行和交互阶段，如图中左半部分，这个阶段组件可以处理用户交互，或者接收事件更新界面；
• 第三阶段：是组件卸载的阶段，如图中右半部分，这里做一些组件的清理工作

这里需要强调和解释以下几点：

• 第一阶段
  constructor 相当于构造函数，全局只调用一次，我们可以进行一些初始化阶段，可以设置一些需要动态改变的值，如

constructor(props) {
      super(props);
          //设置一些初始值
      this.state = {
      };
}

这里super(props)是必须调用的. 这个跟旧RN版本是有区别的，我们不再用关注getDefaultProps getInitialState 这些过时的方法。

• 第二阶段

componentWillReceiveProps(nextProps)

我发现有很多人在问，这个方法为什么不调用，我们可以看一段这个方法的解释：

componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

只有当组件接收到新的属性值的时候才能触发这个方法。

其次当我们设置了this.setState()设置了某些属性值的变化，调用顺序是

• shouldComponentUpdate

• componentWillUpdate

• render

• componentDidUpdate
  如果你认为我只是只是介绍简单的方法调用逻辑，你可能就错了，我想说的是我们可以性能优化的地方在componentWillUpdate,系统给我们一次拦击组件UI 刷新的机会，我们可以做一些判断，如果更新同属性值，我们可以阻止UI的刷新，直接在这个函数中false.

• 第三阶段
  这个阶段是组件卸载的阶段，我们通常做的是清理timer 或者listener。

以上就是react native 生命周期，大家可以试验一下这个过程来加深这个过程。

我给大家准备了一个demo,可以下载下来验证:
https://github.com/markdashi/ReactNativeLife.git

希望看到这篇文章的伙伴，不要盗取本人绘制的流程图，如需要转载最好注明出处，谢谢！