React 组件的生命周期

[JTangming]

React Native 组件的生命周期

最近在开发金钥匙经理端 RN 版本的时候，经常会用到组件生命周期的相关的方法，刚开始接触有些迷糊，现在整理 React Native 组件的结构和生命周期。

生命周期函数

每一个组件都有一些生命周期方法，通过重写这些方法方便在程序运行的过程中使用。如带有 will 的方法被执行则表示某个状态的发生，RN 中的生命周期方法大致归类如下三类：

Mounting

表示调用某个被创建的组件实例

• getInitialState & getDefaultProps

这两个回调函数分别表示组件最初被创建渲染后调用，用来获取初始化的 state 和 props，这两个方法在组件中全局只被调用一次。

• componentWillMount

在组件第一次绘制之后，会调用 componentDidMount()，通知组件已经加载完成，需要注意的是，这个阶段不会重新渲染组件视图

• render

该方法在组件中是必须的，一旦调用，则去检查 this.props 和 this.state 的数据并返回一个 React 元素。render() 方法不能修改组件的 state，同时需要注意的是，shouldComponentUpdate() 方法必须返回 true，否则将不会再执行 render() 方法。

• componentDidMount

这个组件方法表示在组件第一次绘制之后，componentDidMount() 会被调用，用来通知组件已经加载完成，通常我们会在这里去从服务器拉取数据来渲染页面。

Updating

表示 props 或者 state 的改变，将会导致组件的重新渲染

• componentWillReceiveProps

表示组件收到了新的属性（props），调用 componentWillReceiveProps() 来进行某些操作，通常用来更新 state 的状态，在这通过比较 this.props 和 nextProps 来 setState。

• shouldComponentUpdate

当组件接收到新的 state 和 props 改变，该方法将会被触发调用。与前一个方法类似， nextProps 用来比较 state 和 props 是否有改变，通过检查来决定 UI 是否需要更新（返回 true 或 false），在一定程度上可以提高性能。

• componentWillUpdate

表示开始准更新组件，即调用 render() 来更新界面，该方法被调用的条件是 shouldComponentUpdate() 方法最终返回 true。需要注意的是，在这个函数里面，不能使用 this.setState 来修改状态。

• componentDidUpdate

表示调用 render() 方法完成了界面的更新，需要注意的是，该方法在初始的 render 中将不会被调用。

Unmounting

组件的销毁阶段

componentWillUnmount 表示组件即将被销毁或退出该组件，在这里常用来移除一些功能方法，如timeout事件或者abort相关的request。

生命周期的过程

生命周期表示从开始生成到最后销毁所经历的状态，网上已有很好的路程图，收藏该流程图如下：

从图中可以清晰的划分为以下三类：

• 组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；
• 组件的运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；
• 组件的销毁阶段，如图中右下角的虚线框中，在这里常用来移除一些功能方法。

通过前面的图可以看出，在生命周期函数中只有以下三个才能调用 setState() 方法的，这些方法为：componentWillMount、componentDidMount、componentWillReceiveProps。

reference

• http://busypeoples.github.io/post/react-component-lifecycle/
• https://facebook.github.io/react/docs/react-component.html
• http://www.oschina.net/news/76862/react-component-life-circle
• https://medium.com/@thekevinscott/custom-lifecycle-methods-in-react-native-f84c7257eaa6

[JTangming]

16.3/+ 新生命周期

React 在v16.3版本中将 componentWillMount, componentWillReceiveProps 以及componentWillUpdate 加上了UNSAFE_前缀，这些钩子将在React 17.0废除。

在17版本推出新的Async Rendering，提出一种可被打断的生命周期，而可以被打断的阶段正是实际dom挂载之前的虚拟dom构建阶段，也就是要被去掉的三个生命周期。