ReactNative组件的生命周期

初始化阶段

• constructor(props)
• 这是组件类的构造函数，通常在此初始化state数据模型。

constructor(props) {
  super(props);
  this.state = {
    //key : value
  };
}

• componentWillMount
• 表示组件将要加载到虚拟DOM，在render方法之前执行，整个生命周期只执行一次。

componentWillMount() {
}

• componentDidMount
• 表示组件已经加载到虚拟DOM，
• 在render方法之后执行，整个生命周期只执行一次。
• 通常在该方法中完成异步网络请求或者集成其他JavaScript库

componentDidMount() {
}

运行阶段

• componentWillReceiveProps(nextProps)
• 在组件接收到其父组件传递的props的时候执行,参数为父组件传递的props。
• 在组件的整个生命周期可以多次执行。
• 通常在此方法接收新的props值，
• 重新设置state。

componentWillReceiveProps(nextProps) {
  this.setState({
    //key : value
  });
}

• shouldComponentUpdate(nextProps, nextState)
• 在componentWillReceiveProps(nextProps)执行之后立刻执行；
• 或者在state更改之后立刻执行。
• 该方法包含两个参数，分别是props和state。
• 该方法在组件的整个生命周期可以多次执行。
• 如果该方法返回false，
• 则componentWillUpdate(nextProps, nextState)及其之后执行的方法都不会执行，组件则不会进行重新渲染
• 用于拦截props和state做一些逻辑判断

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

• componentWillUpdate(nextProps, nextState)
• 在shouldComponentUpdate(nextProps, nextState)函数执行完毕之后立刻调用，
• 该方法包含两个参数，分别是props和state。
• render()函数执行之前调用。
• 该方法在组件的整个生命周期可以多次执行

componentWillUpdate(nextProps, nextState) {
}

• componentDidUpdate(preProps, preState)
• 在render()方法执行之后立刻调用。
• 该方法包含两个参数，分别是props和state。
• 该方法在组件的整个生命周期可以多次执行。
• 通常用于更新完毕在这里做一些操作

componentDidUpdate(preProps, preState) {
}

• render()
• render方法用于渲染组件。在初始化阶段和运行期阶段都会执行。

render() {
  return(
    <View/>
  );
}

销毁阶段

• componentWillUnmount()
• 销毁时调用，通常用来取消时间绑定
• 移除虚拟DOM中对应组建的数据结构

componentWillUnmount() {
}