大家好，我是前端西瓜哥。今天就来看看React类函数的生命周期。类组件的生命周期React中类组件的生命周期函数分为挂载、更新、卸载三种：UNSAFE_componentWillMount：组件即将被挂载（丢弃）。componentDidMount：组件挂载。UNSAFE_componentWillReceiveProps：父组件更新时获取最新的props（丢弃）。shouldComponentUpdate：是否允许组件更新。UNSAFE_componentWillUpdate：组件即将更新（已弃用）。componentDidUpdate：组件更新。componentWillUnmount：组件即将被卸载和销毁。相关拦截器：staticgetDerivedStateFromProps：获取新的props，然后将对象返回值合并到state中。更新状态的方法：setState(updater[,callback])：更新状态并重新渲染组件。需要注意的是，即使新状态和旧状态一样，组件还是会被重新渲染；forceUpdate：强制更新会跳过shouldComponentUpdate的判断逻辑。此方法常用于state和props以外的数据源更新后的UI重新渲染。老版本生命周期如图：新版本生命周期：componentDidMount组件挂载时会触发该生命周期函数。所谓挂载是指将真正的DOM元素添加到文档树中。使用场景是做一些初始化操作：订阅事件。请求数据。componentDidMount(){this.timerId=setInterval((){//训练顺序是否完成等业务逻辑},800);}componentDidUpdate组件更新时调用componentDidUpdate。挂载组件时不会触发。该函数接收三个参数：preProps：组件更新前的道具。preState：组件更新前的状态。snapshot：与getSnapshotBeforeUpdate一起使用，该方法会在组件每次更新时将返回值保存为快照。参数snapshot获取此快照。使用场景是placement状态发生变化时需要执行的逻辑：用户点击tab，切换id，检查currentId在这个生命周期内是否发生变化，如果发生变化则请求相应的数据。事实上，我们在业务中使用生命周期函数的次数最多，因为前端的场景大多是导致状态变化并执行一些行为的交互。示例：componentDidUpdate(preProps,preState){if(this.state.id!==preState.id){fetchData(this.state.id).then(res{//获取数据后更新状态})}}componentWillUnmountComponents将在卸载前调用componentWillUnmount。通常是做一些解除绑定的收尾工作，防止错误和内存泄漏：取消订阅事件。关闭定时器。取消请求（如果当前正在进行）。执行一些业务逻辑，比如关闭弹窗时保存正在编辑的数据。例子;componentWillUnmount(){clearInterval(this.timerId)}staticgetDerivedStateFromProps从props获取派生状态。getDerivedStateFromProps会在挂载和更新阶段执行，会在渲染之前触发。它是一个类组件的静态属性，接收props和state，它的返回值是一个对象，会在state上合并覆盖。示例：staticgetDerivedStateFromProps(props,state){//半控输入组件，如果props.value是外部传入的，则使用外部//否则使用组件自身内部的state.valueif(props.value){return{value:props.value}}}不推荐这种方式。其实很多场景都没有必要使用这种方式，因为会造成状态突变，可读性不好。因为如果您没有看到这个方法，您可能想知道状态更改为何没有按预期工作。如果可以的话，你不需要它。shouldComponentUpdate收到新的props和state，由开发者决定是否重新渲染。它将获取新的props和state，返回true表示更新并重新渲染，返回false中断更新。准确的说，任何返回值都可以，直接判断为if语句的判断表达式。如果返回false，则状态保持原样。强制更新（this.forceUpdate）不会走这个函数，因为你已经说过要“强制更新”了。shouldComponentUpdate(nextProps,nextState){//即使setState方法更新相同的值，组件仍然会重新渲染//防止重新渲染的一种方法是在这里判断新旧状态是否相同if(nextState.id===this.state.id){returnfalse}returntrue}废弃的生命周期函数一些生命周期函数容易出现bug，在react底层重构后的一次update中可能会被多次触发，所以它们是现在已弃用，并以UNSAFE_为前缀。UNSAFE_componentWillMount：组件即将挂载。UNSAFE_componentWillReceiveProps：当父组件更新时，会调用该函数获取最新的props。此时道具还没有改变。第一次初始化时不会触发该函数。这个方法。UNSAFE_componentWillUpdate：组件即将更新。最后，以上是React的一些生命周期函数。
