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的生命周期将在下个版本被移除，在日常开发中，我们也应该尽量减少方法的调用