React的生命周期钩子函数

一、React的生命周期钩子函数旧版

1. 挂载时，初始化阶段
   1）constructor() : 如果不初始化state或不进行方法绑定，则不需要为react组件实现构造函数
   2）componentWillMount(): 以前在这里进行请求数据，现在即将被废弃
   3）render() : 初次渲染组件的内容
   4）componentDidMount(): 组件挂载完毕以后，可以进行请求数据，可以操作DOM，实例化请求

2. 更新时，运行时阶段
   1）componentWillReceiveProps(nextProps) ：可以依据nextProps 达到类似vue中监听属性的目的，现在即将被废弃
   2）shouldComponentUpdate(): 组件需不需要更新，默认的值为true，默认是更新的，这个要不不写，要写必须要返回值，提升react性能的关键
   3）componentWillUpdate(): 组件即将更新，现在即将被废弃
   4）render(): 组件更新
   5）componentDidUpdate() : 组件更新完毕，Dom操作

3. 卸载时，销毁阶段
   1）componentWillUnmount() : 组件销毁，移出定时器、计时器、销毁对象

4. 错误处理
   1）componentDidCatch(): react组件树出现错误时执行

二、React的生命周期钩子函数新版

1. 挂载时，初始化阶段
   1）constructor(): 如果不初始化state或不进行方法绑定，那么不需要为react组件实现构造函数
   2）static getDerivedStateFromProps() : 调用render() 方法之前调用，并且在初始挂载及后续更新时都会被调用，它应该返回一个对象来更新state，如果返回null则不更新任何内容，一般不会用到，新增加的，要不不写，要写就必须写返回值
   3）render(): 初次渲染组件内容
   4）componentDidMount(): 组件挂载完毕，可以去请求数据，可以操作DOM

2. 更新时，运行时阶段
   1）static getDerivedStateFromProps(): 调用render() 方法之前调用，并且在初始挂载和后续更新时都会被调用，它应该返回一个对象来更新state，如果返回null，则不更新任何内容，一般不会用到
   2）shouldComponentUpdate() : 组件要不要被更新，默认的值为true，默认是更新的，要不不写，要写就必须要有返回值，提升react性能的关键
   3）render(): 组件更新
   4）getSnapshotBeforeUpdate(): 在最后一次渲染输出，提交到DOM节点之前调用，它使得组件在发生更改之前从DOM中捕获一些信息，它的任何返回值都将作为参数传递给componentDidUpdate()
   一般很少会被使用
   5）componentDidUpdate(): 组件更新完毕，DOM操作

3. 卸载时，销毁阶段
   1）componentWillUnmount() : 组件销毁，移出定时器、计时器、销毁对象

4. 错误处理
   1）static getDerivedStateFromError(): 在后代组件抛出错误后被调用，它将抛出的错误作为参数，并返回一个值以更新state
   2）componentDidCatch() : react组件树出现错误时执行