React-Native开发三 React Native组件生命周期

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最大的区别就是将实例化阶段和后续的更新阶段分开了。

参考：https://www.jianshu.com/p/379aecebb1dc