【React生命周期】

React 生命周期

从图上可以知道react 生命周期可以分为三个状态

• 挂载时
• 更新时
• 卸载时

挂载阶段

constructor ：初始化阶段

• 可以接受来自super(props)或者父组件传递的props属性
• 可以定义state对象
• 通过this绑定自身定义的方法

getDerivedStateFromProps：新增的生命周期函数

在挂载以及后续更新时都会被调用。static getDerivedStateFromProps(nextProps, state)，第一个参数是即将更新的props ,第二个参数是上一个状态的state,可以进行比较然后更新，返回一个对象来更新 state, 如果返回 null 则不更新任何内容。

render()函数：渲染DOM结构

render() 方法是 class 组件中唯一必须实现的方法。

componentDidMount ：在组件渲染之后执行

componentDidMount() 是发送网络请求、启用事件监听方法的好时机，并且可以在 此钩子函数里直接调用 setState()
可以调用后端接口获取数据

componentDidMount() {
   //organQueryTree为后端接口
    organQueryTree = () => {
      return organQueryTree({ organType: '001' }).then(res => {
        if (res && res.data.organTreeDto) {
          this.setState({ organTreeDtoLIst: res.data.organTreeDto[0].children });
        }
      });
    };

更新阶段

getDerivedStateFromProps：新增的生命周期函数

shouldComponentUpdate：render之前调用

大量的数据更新会触发组件一遍又一遍的更新，会造成不小的性能损耗，这里就需要shouldComponentUpdate(nextProps, nextState)，第一个参数是即将更新的props ,第二个参数是上一个状态的state,用于控制是否根据当前的props 和state 重新渲染组件，可以通过返回值来判断是否更新，返回true则更新，不能再这个阶段使用setState(),否则会无限循环。

render()函数：渲染DOM结构

render() 方法是 class 组件中唯一必须实现的方法。

getSnapshotBeforeUpdate：render之后 componentDidUpdate之前调用

getSnapshotBeforeUpdate(prevProps, prevState) 有两个参数prevProps和prevState，表示之前的属性和之前的state，这个函数有一个返回值，会作为第三个参数传给componentDidUpdate，如果你不想要返回值，可以返回null，此生命周期必须与componentDidUpdate搭配使用

componentDidUpdate：组件更新后立即执行， 首次渲染不会执行

componentDidUpdate(prevProps, prevState, snapshot)，prevProps：上一次 props 的值，prevState： 上一次 state 的值，snapshot： getSnapshotBeforeUpdate() 返回值的参数传递，当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。可以在componentDidUpdate() 中直接调用 setState()，但请注意它必须被包裹在一个条件语句里。注意: 如果 shouldComponentUpdate() 返回值为 false ，则不会调用 componentDidUpdate()

卸载阶段

componentWillUnmount() 在组件即将被卸载或销毁时进行调用。

此生命周期是取消网络请求、移除监听事件、清理 DOM 元素、清理定时器等操作的好时机

总结 —新旧周期的比较

旧的生命周期

生命周期的三个阶段（旧）

1. 初始化阶段: 由ReactDOM.render()触发—初次渲染

constructor()
componentWillMount()
render()
componentDidMount()

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

componentWillUnmount()

对比新的生命周期图以及旧的生命周期图可以发现
即将在新的版本中废弃三钩子函数

1.componentWillMount
2.componentWillReceiveProps
3.componentWillUpdate

如果要使用需要在每个钩子函数前面加上“UNSAFE_” 的前缀 比如
UNSAFE_componentWillMount()

在新的React 生命周期中提出了两个新的钩子函数

1.getDerivedStateFromProps
2.getSnapshotBeforeUpdate

在这众多的钩子函数中 使用最多的就是

1.render：初始化渲染或更新渲染调用
2.componentDidMount：开启监听, 发送ajax请求
3.componentWillUnmount：做一些收尾工作, 如: 清理定时器

---

参考：
1.https://www.cnblogs.com/houxianzhou/p/15047494.html
2.https://blog.csdn.net/qq_16525279/article/details/116839734
3.https://www.bilibili.com/video/BV1wy4y1D7JT?p=48&spm_id_from=pageDriver