React 生命周期
1、生命周期图
react生命周期函数挂载、卸载只会执行一次，更新会执行多次。
2、生命周期的三个阶段
1）挂载时（创建）
- 执行时机：组件创建时（页面加载时）
- 执行顺序：Constructor() --> render() --> componentDidMount()
| 钩子函数 | 触发时机 | 作用 |
|---|
| constructor () | 创建组件时 | 1,初始化state； 2.为事件处理程序绑定this |
| render () | 每次组件渲染都会触发 | 渲染UI（ 注意不能调用setState() ） |
| componentDidMount () | 组件挂载（完成DOM渲染）后 | 1.发送网络请求； 2.DOM操作 |
2) 更新时
-执行时机：1、setState()；2、forceUpdate()；3、组件收到新的props。以上三种变化都会使组件重新渲染
| 钩子函数 | 触发时机 | 作用 |
|---|
| render() | 每次组件渲染都会触发 | 渲染UI |
| componetDidUpdate() | 组件更新（完成Dom渲染）后 | 1.发送网络请求；2.Dom操作 |
3) 卸载时
| 钩子函数 | 触发时机 | 作用 |
|---|
| componentWillUnMount() | 组件卸载之前 | 完成组件的卸载和数据的销毁 |
3、不常用的生命周期函数
1）static getDerivedStatesFromProps( nextProps, pervState) 静态方法生命周期钩子
- 执行时机：会在调用render方法之前调用，并且在初始挂载、更新时都会被调用。它应返回一个对象来更新state，如果返回的是null则不更新任何内容。
- 使用静态方法，可以强制开发者在render之前只做无副作用的操作，而且能做的操作局限在props和state决定新的state而已
2）shouldCompontentUpdate(nextProps, nextState) 是否要更新组件时触发的函数
- 这个生命周期函数是一个开关，判断是否需要更新，主要用来优化性能，调用this.forceUpdate会无视这个钩子，强制更新
- 可以通过比较this.props和nextProps、this.state和nextState来判断状态是否发生改变；状态发生变化，组件会进入渲染流程，renturn false可以阻止组件更新
- 父组件的重新渲染会导致组件重新渲染。可以通过此钩子函数限制子组件是否需要更新
3）getSnapshotBeforeUpdate(prevProps, prevState) 保存状态快照
- 主要用来代替componentWillUpdate生命周期函数。
- 执行时机：会在最终的render之前被调用，它与componentDidUpdate函数中的元素状态是一致的
