React Component（生命周期）

RN 组件的生命周期如下图：

RN生命周期

一、生命周期划分

• 第一阶段：组件第一次绘制，完成组件的加载和初始化。
• 第二阶段：组件在运行和交互，处理用户交互、接受事件更新界面。
• 第三阶段：组件卸载消亡，做一些组件的清理工作。

二、生命周期回调函数

getDefaultProps

在组件创建之前，会先调用 getDefaultProps()，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。

getInitialState

在组件被创建并加载时，首先调用 getInitialState()，来初始化组件的状态。

componentWillMount

在组件创建，并初始化了状态之后，在第一次绘制render()之前调用。

• 可以在这做业务初始化操作、设置组件状态。
• 此函数整个生命周期中仅调用一次。

componentDidMount

在组件第一次绘制之后调用，通知组件已经加载完成。

• 这个函数调用的时候，虚拟DOM已构建完成,在此函数开始可获取其中的元素或者子组件。
• 注意：RN 是先调用子组件的componentDidMount()，再调用父组件的函数。
• 此函数整个生命周期中仅调用一次。

componentWillReceiveProps

当已加载组件收到新参数属性时调用componentWillReceiveProps(nextProps)。

• nextProps将被设置的属性，旧属性还是可以通过this.props来获取。
• 可以调用this.setState()来更新组件状态，此处调用更新状态是安全的，并不会出发额外的render()

shouldComponentUpdate

当组件接收新属性和状态改变时，都会调用。

boolean shouldComponentUpdate(  
  object nextProps, object nextState
)

• nextProps将被设置的属性，nextState表示组件即将更新的状态值。
• 返回值决定是否更新组件，true 更新。
• 默认情况下，此函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。在大型项目中，你可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，能有效提高应用性能。
• 不能调用setSate()

componentWillUpdate

准备更新组件。

void componentWillUpdate(  
  object nextProps, object nextState
)

• 可做一些在更新界面之前要做的事情。
• 此函数调用后，会把nextProps和nextState分别设置到this.props和this.state中。
• 紧接着这个函数，就会调用render()来更新界面了。
• 不能调用setSate()

componentDidUpdate

更新完成界面调用。

void componentDidUpdate(  
  object prevProps, object prevState
)

• prevProps 与 prevState 更新后的参数与状态。
• 不能调用setSate()

componentWillUnmount

当组件要被从界面上移除的时候调用。

• 可做些组件相关的清理工作，例如取消计时器、网络请求等。
• 不能调用setSate()

---

2019/05/18