ReactNative – 组件的生命周期

如同Android的Activity一样，React中的组件也有自己的生命周期。首先看下面这张图：

image

• 上面第一个虚线框内是React组件被绘制的阶段，组件被加载和初始化
• 左下角的虚线框内是组件的交互状态，在这里处理交互动作，更新UI
• 右下角是组件被销毁前的阶段，主要有一些清理的工作

下面依次讲下每个方法都是何时被调用的

• object getDefaultProps()
  在组件类创建的时候调用一次，然后返回值被缓存下来。全局调用一次，所有实例共享。

• object getInitialState()
  在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。

• componentWillMount ()
  在初始化渲染执行之前立刻调用

• ReactComponent render()
  这个方法是必须的，对视图进行渲染，你也可以返回 null 或者 false 来表明不需要渲染任何东西

• componentDidMount()
  在初始化渲染执行之后立刻调用一次

• componentWillReceiveProps(object nextProps)
  在组件接收到新的 props 的时候调用，也就是父组件修改子组件的属性时触发。在初始化渲染的时候，该方法不会调用。可以用于更新 state 来响应某个 prop 的改变。

• boolean shouldComponentUpdate(object nextProps, object nextState)
  在接收到新的 props 或者 state，将要渲染之前调用,如果确定新的 props 和 state 不会导致组件更新，则此处应该 返回 false。返回true将进行渲染。

• componentWillUpdate(object nextProps, object nextState)
  在接收到新的 props 或者 state 并且shouldComponentUpdate返回true时调用

• componentDidUpdate(object prevProps, object prevState)
  在组件的更新已经同步到 DOM 中之后立刻被调用

• componentWillUnmount()
  在组件从 DOM 中移除的时候立刻被调用。在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。

参考文章

• ReactNative – 组件的生命周期
• React Native 中组件的生命周期