React的生命周期钩子函数

灰太狼 2021-11-01 10:38 508阅读 0赞

一、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组件树出现错误时执行