2.2 组件的生命周期

为了理解 RN 组件的工作方式，我们就必须了解 RN 组件的生命周期，每个组件会被创建、更新和删除。如图2-6所示，ES6语法和之前的ES5语法有所变化，本节是根据ES6语法写的。

图2-6 组件的生命周期

在ES5语法中，有getDefaultPropTypes这个函数，这个函数在组件被创建时，调用一次，它的返回值成为了this.props的初始值。

而ES6语法中，属性的类型和默认值声明不像ES5语法那样在组件定义内部声明,而是在组件定义的外部声明，所以声明周期函数没有了getDefaultPropTypes了，但是声明DefaultPropTypes也是在组件创建的时候调用一次。

constructor 构造方法

这个方法会在组件创建的时候调用一次。 这个方法中可以通过this.state初始化状态机(ES5是通过getInitialState方法初始化的)。 一般还在该方法中进行方法的bind(this)的操作。

    constructor(props) {
        console.log("constructor");
        super(props);
        // 初始状态
        this.state = {
            value: this.props.initValue || 1
        };
    }

componentWillMount

在 React Native 组件的生命周期中,这个函数只会被执行一次。它在初始渲染前被执行，当它执行完后，render函数会马上被 React Native 框架调用执行。 如果在这个函数中通过 setState 函数修改状态机变量，RN 框架不会额外执行渲染。 如果子组件也有 componentWillMount 函数，会在父组件之后调用。参考图2-7。

通常我们不需要定义 componentWillMount 这个函数，顾名思义，这个函数发生在 “将要装载” 的时候，这个时候并没有开始渲染，所有可以在这个函数中做的事情，都可以提前到 constructor 中间去做，可以认为这个函数存在的主页目的就是为了和下面的 componentDidMount 函数对称。

componentDidMount

在React Native组件的生命周期中,这个函数只会被执行一次，它在初始渲染完成后会马上被调用。在这之后开发者可以通过子组件的引用来访问，操作任何子组件。

如果RN组件的子组件也有componentDidMount函数，并会在父组件的componentDidMount函数之前被调用。参考图2-7。

一般情况在这个方法中请求网络数据是一个不错的选择。

图2-7 父组件和子组件生命周期函数

componentWillReceiveProps

这个函数原型是:

componentWillReceiveProps(object nextProps)

在React Native组件的初始渲染完成后，当React Native组件接收到新的props时，这个函数将被调用。参数就是新的props。

再次强调下，初次渲染时不会调用该方法，是故意设计这种机制的

如果新的props会导致界面重新渲染，这个函数将在渲染前执行。如果函数中修改状态机变量，框架不会立刻执行状态机改变的渲染而是等函数执行完了一起渲染。

shouldComponentUpdate

这个函数的原型是:

boolean shouldComponentUpdate(object nextProps, object nextState)

React Native组件的初始渲染执行完成后，RN组件接收到新的state或者props时这个函数会调用。

函数需要返回一个布尔值，告诉React Native框架针对这次改变是否重新渲染， 如果返回false，不会渲染，相应的下面两个方法 componentWillUpdate和componentDidUpdate函数不会调用。

通过这个函数阻止无必要的重新渲染，是提高React Native应用程序性能的一大技巧。

componentWillUpdate

这个函数的原型是：

componentWillUpdate(object nextProps, object nextState)

初始渲染完成后,重新渲染前会调用这个函数。但是这个函数不能通过 this.setState 再次改变状态机变量的值。

componentDidUpdate

其函数原型是：

componentDidUpdate(object preProps,object prevState)

RN组件初始渲染完成后，RN框架在重新渲染RN组件完成后调用。
参数是渲染前的props和 state

componentWillUnmount

函数原型：

componentWillUnmount()

在 RN 组件被卸载前，这个函数将被执行。与装载和更新过程不一样，这个函数没有配对的 Did 函数，就一个函数，因为卸完了就完了。

查看代码

如果你已经从 GitHub 上克隆了这个程序的 Git 仓库，那么可以执行 git checkout 2d签出程序的这个版本。