ReactNaive组件生命周期

7

ReactNaive组件生命周期

• ReactNative 的生命周期大概分为三阶段，实例化阶段，运行阶段，销毁阶段

RN 组件的生命周期整理如下图

• 实例化阶段：是组件第一次绘制阶段，如图中的红色框内，在这里完成了组件的加载和初始化；

• 运行阶段：是组件在运行和交互阶段，如图中绿色线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；

• 销毁阶段：是组件卸载消亡的阶段，如图中蓝色线框，这里做一些组件的清理工作。

实例化阶段

• constructor:

  调用时间 : 开始实例化组件的时候调用
  作用 : 初始化state.

• componentWillMount:

  调用时间 : 即将加载组件的时候调用
  作用 : 在render之前做事情

• render:

  调用时间 : 渲染组件的时候调用
  作用 : 渲染UI界面

• componentDidMount:

  调用时间 : 加载组件完成的时候调用
  作用 : 通知组件已经加载完成，在render之后做事情，发送请求等

• 注意：constructor，componentWillMount，componentDidMount 只会调用一次， render 大于一次。

运行阶段

• componentWillReceiveProps:

  调用时间 : 每次传入Props，就会调用
  作用 : 拦截props

• shouldComponentUpdate:

  调用时间 : 每次props,或者state改变，就会调用
  作用 : 控制是否刷新界面

• componentWillUpdate:

  调用时间 : 组件即将更新调用
  作用 : 在render更新前做事情

• componentDidUpdate:

  调用时间 : 组件更新完成调用
  作用 : 在render更新后做事情

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

销毁阶段

• componentWillUnmount:

  调用时间 : 组件即将销毁的时候调用
  作用 : 移除观察者，清空数据