JTangming
commented
4 years ago 16.3/+ 新生命周期
React 在v16.3版本中将 componentWillMount, componentWillReceiveProps 以及componentWillUpdate 加上了UNSAFE_前缀，这些钩子将在React 17.0废除。
在17版本推出新的Async Rendering，提出一种可被打断的生命周期，而可以被打断的阶段正是实际dom挂载之前的虚拟dom构建阶段，也就是要被去掉的三个生命周期。
React Native 组件的生命周期
最近在开发金钥匙经理端 RN 版本的时候，经常会用到组件生命周期的相关的方法，刚开始接触有些迷糊，现在整理 React Native 组件的结构和生命周期。
生命周期函数
每一个组件都有一些生命周期方法，通过重写这些方法方便在程序运行的过程中使用。如带有 will 的方法被执行则表示某个状态的发生，RN 中的生命周期方法大致归类如下三类：
Mounting
表示调用某个被创建的组件实例
这两个回调函数分别表示组件最初被创建渲染后调用，用来获取初始化的 state 和 props，这两个方法在组件中全局只被调用一次。
在组件第一次绘制之后，会调用 componentDidMount()，通知组件已经加载完成，需要注意的是，这个阶段不会重新渲染组件视图
该方法在组件中是必须的，一旦调用，则去检查 this.props 和 this.state 的数据并返回一个 React 元素。render() 方法不能修改组件的 state，同时需要注意的是，shouldComponentUpdate() 方法必须返回 true，否则将不会再执行 render() 方法。
这个组件方法表示在组件第一次绘制之后，componentDidMount() 会被调用，用来通知组件已经加载完成，通常我们会在这里去从服务器拉取数据来渲染页面。
Updating
表示 props 或者 state 的改变，将会导致组件的重新渲染
表示组件收到了新的属性（props），调用 componentWillReceiveProps() 来进行某些操作，通常用来更新 state 的状态，在这通过比较 this.props 和 nextProps 来 setState。
当组件接收到新的 state 和 props 改变，该方法将会被触发调用。与前一个方法类似， nextProps 用来比较 state 和 props 是否有改变，通过检查来决定 UI 是否需要更新（返回 true 或 false），在一定程度上可以提高性能。
表示开始准更新组件，即调用 render() 来更新界面，该方法被调用的条件是 shouldComponentUpdate() 方法最终返回 true。需要注意的是，在这个函数里面，不能使用 this.setState 来修改状态。
表示调用 render() 方法完成了界面的更新，需要注意的是，该方法在初始的 render 中将不会被调用。
Unmounting
组件的销毁阶段
componentWillUnmount 表示组件即将被销毁或退出该组件，在这里常用来移除一些功能方法，如timeout事件或者abort相关的request。
生命周期的过程
生命周期表示从开始生成到最后销毁所经历的状态，网上已有很好的路程图，收藏该流程图如下：
从图中可以清晰的划分为以下三类：
通过前面的图可以看出，在生命周期函数中只有以下三个才能调用 setState() 方法的，这些方法为：componentWillMount、componentDidMount、componentWillReceiveProps。
reference