React Native 中组件的生命周期

概述

    React Native(RN)中的组件也有生命周期(Lifecycle)。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，对我们的开发很重要，对我们的开发很重要，对我们的开发很重要。(重要的事情说三遍，亲生经历，很重要)。

贴个图，让大家理解一下

有图有真相，组件生命周期大致分为三个阶段：

第一阶段：是组件第一次绘制阶段(图中的上方虚线框)，在这里执行组件的加载和初始化。

第二阶段：是组件在运行和交互阶段(图中的左下角虚线框)，在这个阶段组件处理用户交互，更新界面等事件。

第三阶段：是组件卸载消亡的阶段(图中的右下角虚线框)，这里做一些组建的清理工作。

生命周期回调函数

getDefaultProps

在组件创建之前，会先调用getDefaultProps(),全局仅调用一次。组件被创建并加载等候时，首先调用getInitialState(),来初始化组件的状态。

componentWillMount

该函数调用时机是在组件创建，并初始化了状态之后，在第一次绘制render()之前。可以做一些业务初始化操作，也可以设置组件状态。这个函数在整个生命周期中只被调用一次。

componentDidMount

组件第一次绘制后，会调用componentDidMount()，通知组件已经加载完成。

该函数调用时，其虚拟DOM已经构建完成，可以在这个函数开始时获取其中的元素或者子组件。RN是先调用子组件的componentDidMount()，然后调用父组件的函数。从这个函数开始，可以和其它js框架进行交互，例如设置计时器，或者发起网络请求。这个函数也是只被调用一次。

componentWillReceiveProps

组件收到新的属性(props)，就会调用componentWillReceiveProps()。

参数nextProps是即将被设置的属性，旧属性还是通过this.props来获取。在这个回调函数里，可以根据属性的变化，来调用this.setState()来更新组件状态，在这里调用setState是推荐的，因为不会触发额外的render().

componentWillReceiveProps: function(nextProps) {  
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

shouldComponentUpdate

当组件接收到新的属性和状态改变的话，都会触发shouldComponentUpdate。

boolean shouldComponentUpdate(  
  object nextProps, object nextState
)

nextProps即组件收到的新的属性，nextState表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件，true表示更新，false表示不更新，默认返回true。

componentWillUpdate

如果组件状态或者属性改变，并且shouldComponentUpdate返回true，就会准备更新组件，调用componentWillUpdate()。

void componentWillUpdate(  
  object nextProps, object nextState
)

参数与上面一样，在这个函数里，不能使用this.setState来修改状态。该函数在render()方法之前执行。

componentDidUpdate

执行完render()之后，就会调用componentDidUpdate()。

void componentDidUpdate(  
  object prevProps, object prevState
)

因为到这里已经完成了属性和状态的更新了，此函数的输入参数变成了 prevProps 和 prevState。

componentWillUnmount

当组件要被从界面上移除的时候，就会调用 componentWillUnmount()，其函数原型如下：

void componentWillUnmount()  

在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等。

总结如图

个人demo： http://www.chenzhuo.ltd/loveshare/