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
网友评论