React Native 组件（一）组件的生命周期

相关文章
React Native探索系列

前言

React Native有不少组件好比Image、ListView等等，想要合理的使用组件，首先要先了解组件的生命周期。

1.概述

不管你是开发Android仍是iOS，对于组件的生命周期必定不陌生，这是开发的基础。一样的React Native的组件也有生命周期，当应用启动，React Native在内存中维护着一个虚拟DOM，组件的生命周期就是指组件初始化并挂载到虚拟DOM为起始，到组件从虚拟DOM卸载为终结。生命周期的方法就是组件在虚拟DOM中不一样状态的描述。

从上图所示，组件的生命周期分为三个阶段，分别是挂载（mounting）、更新（updating）和卸载（Unmounting），其中挂载和更新阶段都会调用rander方法进行绘制。下面对这三个阶段分别进行讲解。

2.挂载

挂载指的是组件的实例被建立并插入到DOM中，挂载会调用以下方法。

constructor

constructor是RN组件的构造方法，它在RN组件被加载前先被调用。当咱们的组件继承自React.Component时，须要在构造方法中最早调用super(props)。若是不须要初始化state，则不须要实现构造方法。
在构造方法中初始化state，以下所示。

constructor(props) {
  super(props);
  this.state = {
    text: '构造方法'
  };
}复制代码

componentWillMount

componentWillMount()复制代码

componentWillMount方法在挂载前被当即调用。它在render方法前被执行，所以，在componentWillMount方法中设置state并不会致使从新被渲染。它只会被执行一次，一般状况下，建议使用constructor方法来代替它。

rander

render()复制代码

该方法是必须的，一旦调用，则会去检查 this.props 和 this.state 的数据并返回一个 React 元素。render方法中不该该修改组件的props和state，由于render方法是“纯洁的”，这意味着每次调用该方法时都会返回相同的结果。render方法在更新阶段也会被调用，前提是shouldComponentUpdate方法返回true。

componentDidMount

componentDidMount()复制代码

componentDidMount方法在组件被挂载后当即调用，在render方法后被执行。开发者能够在这个方法中获取其中的元素或者子组件，须要注意的是，子组件的componentDidMount方法会在父组件的componentDidMount方法以前调用。若是须要从网络加载数据显示到界面上，在这里进行网络请求是一个不错的选择。在componentDidMount方法中设置state将会被从新渲染。

3.更新

改变props或者state时能够致使更新，当一个组件被从新渲染时，会调用以下方法。

componentWillReceiveProps

componentWillReceiveProps(nextProps)复制代码

componentWillReceiveProps方法会在挂载的组件接收到新的props时被调用，它接收一个Object类型参数nextProps，表示新的props。一般在这个方法中接收新的props值，并根据props的变化，经过调用 this.setState() 来更新组件state，this.setState()不会触发 render方法的调用。
在挂载的过程当中，初始的props并不会触发调用componentWillReceiveProps方法，这个方法只会在组件中的props更新时被调用，另外，调用this.setState()也不会触发调用componentWillReceiveProps方法。

shouldComponentUpdate

boolean shouldComponentUpdate(nextProps, nextState)复制代码

当组件接收到新的props和state时，shouldComponentUpdate方法被调用，它接收两个Object参数，nextProps是新的props，nextState是新的state。
shouldComponentUpdate方法默认返回true，用来保证数据变化时，组件可以从新渲染。你也能够重载这个方法，经过检查变化先后props和state，来决定组件是否须要从新渲染。若是返回false，则组件不会被从新渲染，也不会调用本方法后面的componentWillUpdate和componentDidUpdate方法。

componentWillUpdate

componentWillUpdate(nextProps, nextState)复制代码

若是组件props或者state改变，而且此前的shouldComponentUpdate方法返回为 true，则会调用该方法。componentWillUpdate方法会在组件从新渲染前被调用，所以，能够在这个方法中为从新渲染作一些准备工做。须要注意的是，在这个方法中，不能使用 this.setState 来更改state，若是想要根据props来更改state，须要在componentWillReceiveProps方法中去实现，而不是在这里。

componentDidUpdate

componentDidUpdate(prevProps, prevState)复制代码

组件从新渲染完成后会调用componentDidUpdate方法。两个参数分别是渲染前的props和渲染前的state。这个方法也适合写网络请求，好比能够将当前的props和prevProps进行对比，发生变化则请求网络。

4.卸载

卸载就是从DOM中删除组件，会调用以下方法。

componentWillUnmount()

componentWillUnmount()复制代码

componentWillUnmount方法在组件卸载和销毁以前被当即调用。能够在这个方法中执行必要的清理工做，好比，关掉计时器、取消网络请求、清除组件装载中建立的DOM元素等等。

组件的生命周期就讲到这里，这个系列的后续文章会介绍React Native的经常使用组件，敬请期待。

参考资料
The Component Lifecycle
Understanding the React Component Lifecycle
React Native 中组件的生命周期
《React Native跨平台移动应用开发》第二版

---

欢迎关注个人微信公众号，第一时间得到博客更新提醒，以及更多成体系的Android相关原创技术干货。
扫一扫下方二维码或者长按识别二维码，便可关注。