React生命周期简介
React生命周期指的是组件从创建到卸载的整个过程，每个过程都有对应的钩子函数，它主要有以下几个阶段：
1、挂载阶段 - 组件实例被创建和插入Dom树的过程
2、更新阶段 - 组件被重新渲染的过程
3、卸载阶段 - 组件从Dom树中被删除的过程
早在React16.3就开始对生命周期做了一些改动，React16.3新增了两个生命周期函数：
1、static getDerivedStateFromProps(nextProps, prevState)
2、getSnapshotBeforeUpdate(prevProps, prevState)
新增的特性：
1、static getDerivedStateFromError(error)
2、componentDidCatch(error, info)
同时Facebook声明将在React17版本将删除以下生命周期函数：
1、componentWillMount
2、componentWillReceiveProps
3、componentWillUpdate
保留以下生命周期函数：
1、UNSAFE_componentWillMount
2、UNSAFE_componentWillReceiveProps
3、UNSAFE_componentWillUpdate
React生命周期是学习React不可缺少的部分，所以学习React就不得不了解，搞懂它！希望这篇文章能够快速的帮到大家。
下面就以17版本做为划分，React16.3新增的两个周期函数归为17版本。下面将围绕生命周期的三个阶段以理论结合实战来详细操作一波......
17版本前生命周期
1、挂载阶段
这个阶段主要是做初始化操作，主要有这几个钩子函数：
static defaultProps -- 设置props的默认值
static propTypes -- props数据类型检查
constructor(props) -- 构造函数
componentWillMount() -- 组件挂载前钩子
render() -- 组件更新钩子
componentDidMount() -- 组件挂载成功钩子，该过程组件已经成功挂载到了真实Dom上
或许有小伙伴会问static静态方法是咋肥事，简单来说是它不依赖构造函数，只跟类有关，可优先于构造函数执行。
2、更新阶段
这个阶段主要是做状态更新操作，主要有这几个钩子函数：
componentWillReceiveProps(newProps) -- 父组件更新props钩子
shouldComponentUpdate() -- 组件是否更新钩子
componentWillUpdate() -- 组件更新前钩子
render() -- 组件渲染钩子
componentDidUpdate() -- 组件更新成功钩子
3、卸载阶段
这个阶段主要是从Dom树中删除组件的操作，它的钩子函数：
componentWillUnmount() -- 组件将要被卸载的时候调用
下面准备了两个组件：
1、父组件 - parent.js
2、子组件 - children.js
界面效果如下：
主要是演示下面几个过程，观察生命周期函数的执行流程：
1、组件初始化
2、父节点修改子节点的props
3、子节点修改内部状态state
4、组件强制刷新
5、组件卸载
01、组件初始化过程
父组件代码：
子组件代码：
组件初始化时控制台打印的信息：
02、组件更新过程
父组件更新子组件props控制台打印的信息：
子组件修改内部状态state控制台打印的信息：
子组件强制更新控制台打印的信息：
03、组件卸载过程
从父组件中卸载子组件控制台打印的信息：
总结
1、从上面演示的几个过程中不难发现React的一个更新原理，只要父组件更新必然引起子组件的更新，不管子组件的props是否变化。组件是否需要更新取决于shouldComponentUpdate这个钩子函数，它的默认值为return true。false则代表不需要更新。这被称为“render浪潮”，性能上也会有所影响。
2、static defaultProps和static propTypes优先于constructor执行，因为如果父组件不向子组件传递props时，子组件会获取默认props并且进行静态类型检测：（把父组件传给子组件的props去掉，让子组件读取内部的默认props，并且修改它的静态类型）
3、经过上面一系列的过程得出如下完整的17之前版本生命周期图：
17版本生命周期
17版本新增了两个生命周期函数：
1、static getDerivedStateFromProps(nextProps, prevState)
2、getSnapshotBeforeUpdate(prevProps, prevState)
17版本删除了以下生命周期函数：
1、componentWillMount
2、componentWillReceiveProps
3、componentWillUpdate
所以在16.x版本中使用新生命周期时不可和这三个函数一起使用，否则会报错。
01、组件初始化过程
子组件代码：
**组件初始化时控制台打印的信息：
**
02、组件更新过程
父组件更新子组件props控制台打印的信息：
子组件修改内部状态state控制台打印的信息：
**子组件强制更新控制台打印的信息：
**
03、组件卸载过程
**从父组件中卸载子组件控制台打印的信息：
**
总结
1、static getDerivedStateFormProps(nextProps, prevState)在render前调用，在初始挂载以及后续更新时都会被调用。他应该返回一个对象来更新state。如果返回null则不更新任何内容。它接收两个参数，一个是传进来的nextProps和之前的prevState。
2、getSnapshotBeforeUpdate(prevProps, prevState)在更新阶段render后挂载到真实Dom前进行的操作，它使得组件能在发生更改之前从DOM中捕获一些信息。此组件返回的任何值将作为componentDidUpdate的第三个参数。
3、经过上面一系列的过程得出如下完整的17版本生命周期图：
