生命周期图示如下

image

defaultProps

static propTypes = {

    containerStyle: PropTypes.object,

    message: PropTypes.string,

    refreshFunc: PropTypes.func,

    marginTop: PropTypes.number

  }

  static defaultProps = {

    message: "暂无相关数据",

    marginTop: 160 * unitHeight,

    showRefresh: false

  }

默认Props

通过组件类的 defaultProps 属性为 props 设置默认值

Constructor

constructor(props) {

    super(props)

    this.state = {

    }

  }

constructor 函数构造器，用来初始化状态

ComponentWillMount

ComponentWillMount() {  } 

ComponentWillMount 方法在日常开发中使用的并不多，可以用来组件在render之前设置state，但对于数据的获取异步请求不要放在这里

render

render是一个组件必须有的方法，形式为一个函数，渲染界面，并返回JSX或其他组件来构成DOM，只能返回一个顶级元素。

componentDidMount

在组件第一次绘制之后，会调用 componentDidMount()，通知组件已经加载完成。这个函数调用的时候，其虚拟 DOM 已经构建完成，你可以在这个函数开始获取其中的元素或者子组件了。需要注意的是，RN 框架是先调用子组件的 componentDidMount()，然后调用父组件的函数，该方法只调用一次，在这里处理一些事件的挂载，数据的获取等

至此，组件的首次实例化就结束了

当组件开始运行阶段之后会调用其他的生命周期

运行阶段的生命周期分为2种，一种是父组件传递的 props 属性的改变，一种是组件内部state的改变

props 属性的改变

componentWillReceiveProps(nextProps)

当组件接收到新的props时，会触发该函数。在该函数中，通常可以调用setState()来完成对state的修改。

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

shouldComponentUpdate(nextProps, nextState)

返回布尔值（决定是否需要更新组件）

输入参数 nextProps 和上面的 componentWillReceiveProps 函数一样，nextState 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件，如果 true 表示需要更新，继续走后面的更新流程。否者，则不更新，直接进入等待状态。

默认情况下，这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。在大型项目中，你可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，能有效提高应用性能。

componentWillUpdate(nextProps, nextState)

shouldComponentUpdate返回true或者调用forceUpdate之后，就会开始准更新组件，并调用 componentWillUpdate()。

输入参数与 shouldComponentUpdate 一样，在这个回调中，可以做一些在更新界面之前要做的事情。需要特别注意的是，在这个函数里面，你就不能使用 this.setState 来修改状态。这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中。紧接着这个函数，就会调用 render() 来更新界面了。

componentDidUpdate()

虚拟DOM同步到DOM中后，执行该方法，可以在这个方法中做DOM操作。

除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。

componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以对应起来。区别在于，前者只有在挂载的时候会被调用；而后者在以后的每次更新渲染之后都会被调用。

注意：绝对不要在componentWillUpdate和componentDidUpdate中调用this.setState方法，否则将导致无限循环调用。

state属性的改变会直接跳过componentWillReceiveProps 直接触发shouldComponentUpdate

接下来我们在日志中输出看看

image

我们可以看到 带will的生命周期将在下个版本被移除，在日常开发中，我们也应该尽量减少方法的调用

image image

当组件移除时，会触发componentWillUnmount 方法，我们在这个方法中可以将之前创建的定时器和一些监听事件都移除掉，或者处理一些页面移除需要的方法调用