React 生命周期
这篇文章，我们来聊一聊在React中的生命周期。首先我们明确一点，在React中，函数式组件是没有生命周期的。谈到生命周期，都是关于类组件的！
生命周期官方网址
React.Component – React (docschina.org)
生命周期常用的有以下
constructor()
render()
componentDidMount()
componentWillUnmount()
挂载阶段
生命周期执行的顺序为
constructor() ==> static getDerivedStateFromProps ==> render() ==>componentDidMount()
constructor()
在组件挂载之前，需要调用构造函数
static getDerivedStateFromProps()
static getDerivedStateFromProps(props, state)
getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
非常地不常用，为什么不常用呢？
原因很简单，如果你想要修改state中的值，可以使用props！
render()
渲染数据
componentDidMount()
在组件挂载完成之后立即执行，通常用来请求网络数据。类似于Vue中的Mounted(()=>{})
挂载阶段一个综合示例：
class Demo extends React.Component {
constructor() {
super()
console.log("我是第一次");
}
static getDerivedStateFromProps(props, state) {
console.log("我是第二次", props, state);
return null;//这里必须要传一个默认值
//如果传一个对象的话，则要修改state中的数据
}
state = {
msg: "东星耀阳"
}
handleClick = () => {
this.setState({
msg: "吕德华"
})
}
render() {
console.log("我是第三次");
const { msg } = this.state
return (
<div>{msg}
<button onClick={this.handleClick}>CLICK ME</button>
</div>
)
}
componentDidMount() {
console.log("我是第四次执行");
}
}
ReactDOM.render(<Demo name="syk" />, document.querySelector('.box1'))
渲染更新阶段
这个阶段的生命周期函数主要经过
static getDerivedStateFromProps() ==> shouldComponentUpdate() ==>render() ==>
getSnapshotBeforeUpdate() ===>componentDidUpdate()
shouldComponentUpdate()
shouldComponentUpdate(nextProps, nextState)
首次渲染，不会调用此方法
需要设置返回值。如果返回true，则允许更新视图，如果返回为fasle，则不允许更新视图
getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate(prevProps,prevstate)
在发生更改之前，获取一下上次的dom信息、
此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。
componentDidUpdate()
componentDidUpdate(prevProps, prevState, snapshot)
第三个参数就是getSnapshotBeforeUpdate()的返回值
卸载阶段
componentWillUnmount
执行一下 清除定时器之类的操作！！！！
最后附上一张官网图
