前言
最近有点小忙。
一、React生命周期的概念
和Vue一样，在React组件创建、更新，销毁的过程中伴随的各种各样的函数执行。这些在组件特定的时期，被触发的函数，统称为组件的生命周期函数。
二、React生命周期
组件的生命周期可以分为三个阶段，我们也从这三个阶段依次介绍：
2.1 组件安装（Mounting）阶段
在创建组件实例并将其插入DOM时，将按以下顺序调用这些方法：
- constructor()
- static getDerivedStateFromProps() （react16版本后新增）
- render()
- componentDidMount()
constructor()构造函数
主要干两件事
- 将对象分配给state来初始化本地状态。
- 将事件处理程序方法绑定到实例上。
constructor(props) {
super(props);
// Don't call this.setState() here!
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}
static getDerivedStateFromProps() 函数
这是React新增的生命周期函数，它的作用是根据props来派生出新的state。
static getDerivedStateFromProps(props, state) {
console.log(props)
return props
}
接受两个参数：组件的props和此刻的状态state，返回一个对象以更新状态，注意这个对象会和原来的state合并（相同的会替代，和 this.setState() 道理一样），也可以返回一个 null 表示什么都不更新。
Render()函数
该render()函数是个纯函数，主要负责返回React元素。
render()如果shouldComponentUpdate()返回false，将不会被调用。
componentDidMount()函数
componentDidMount()挂载组件（插入树中）后立即调用。需要DOM节点的初始化应在此处进行。一般也用来做两件事：
1、网络数据接口请求的好地方。
2、添加一些事件订阅（当然别忘了在componentWillUnmount()中取消订阅）
2.2 组件更新（Updating）阶段
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
shouldComponentUpdate(nextProps, nextState)函数
在组件更新的时候触发，此方法仅作为性能优化存在，如果shouldComponentUpdate()返回false，然后componentWillUpdate()，render()和componentDidUpdate()将不会被调用。以下是代码通过下一次参数是否改变来判断组件是否重新渲染（执行render函数）
// 判断组件 props是否更新
shouldComponentUpdate(nextProps, nextStates){
return nextProps.content !== this.props.content
}
getSnapshotBeforeUpdate(prevProps, prevState)函数
getSnapshotBeforeUpdate()在将最新呈现的输出提交给DOM之前，立即调用（也就是说我的state已经更新了，但是还没有render，我可以在这里获取更新以前的一些DOM的信息）。它使您的组件可以在DOM可能发生更改之前从DOM中捕获一些信息（例如，滚动位置）。此生命周期方法返回的任何值都将作为参数传递给componentDidUpdate()。
componentDidUpdate(prevProps, prevState, snapshot)函数
componentDidUpdate()发生更新后立即调用，初始渲染不调用此方法。snapshot 参数就是getSnapshotBeforeUpdate(prevProps, prevState)函数返回的参数。
componentDidUpdate()如果shouldComponentUpdate()返回false，将不会被调用。
2.3 组件卸载（Unmounting）阶段
组件卸载阶段执行的函数一般只有componentWillUnmount()
componentWillUnmount()
componentWillUnmount() 在卸载和销毁组件之前立即调用。使用此方法执行任何必要的清除，例如使计时器无效，取消网络请求或清除在 componentDidMount() 中创建的所有订阅。
三、总结
这里只介绍了React主要的一些生命周期函数，有些官方不推荐使用或者将要废除的几个就没有介绍了。总的来说只要记住这几个比较重要的就行了，清楚每个这几个生命周期函数是用来干嘛的，解决了什么问题。
