问题描述

原博客

在React开发中，我们可能经常会遇到这个一个警告：

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method”

意思为：我们不能在组件销毁后设置state，防止出现内存泄漏的情况

出现场景

//组件B    class TestContainer extends Component{        constructor(){            super()            this.state = {                isShow:true            }        }        render(){            return (                
    
                    
     this.setState({isShow:!this.state.isShow})}>toggle                    {!!this.state.isShow&&
     }                
    
            )        }    }    //组件A    class Test extends Component{        constructor(){            super()            this.state = {                num:0            }        }        getNum=()=>{            //模拟异步请求            this.timer = setTimeout(()=>{                this.setState({ num: Math.random() })            },3000)        }        render(){            return (                
    
                         {this.state.num}                
    
            )        }    }    在本例子中：        当我们点击组件A时，会发送一个异步请求，请求成功后会更新num的值。        当我们点击组件B时，会控制组件的A的卸载与装载

当我们点击组件A后，组件A需要3秒的时间才能获取到数据并重新更新num的值，假如我们在这3秒内点击一次组件B，

表示卸载组件A，但是组件A的数据请求依然还在，当请求成功后，组件A已经不存在，此时就会报这个警告(大概意思就是：你组件都没了，你还设置个啥)

解决办法

本问题出现的原因就是：我们应该在组件销毁的时候将异步请求撤销

• 在componentWillUnmount中撤销异步请求

1. 在 上有撤销异步请求的方法，但是我们有这么多组件，每次都要撤销岂不是太麻烦了

2. 我们可以利用一个‘开关的思想’，在组件销毁的时候给this上挂载一个属性，每次发送请求的时候，我们判断一下这个属性是否存在(还是麻烦，每次都要判断)

3. 基于思路2，我们不想每次判断，因此是不是应该将其封装，利用修饰器对componentWillUnmount和setState进行改装

function inject_unount (target){        // 改装componentWillUnmount，销毁的时候记录一下        let next = target.prototype.componentWillUnmount        target.prototype.componentWillUnmount = function () {            if (next) next.call(this, ...arguments);            this.unmount = true         }         // 对setState的改装，setState查看目前是否已经销毁        let setState = target.prototype.setState        target.prototype.setState = function () {            if ( this.unmount ) return ;            setState.call(this, ...arguments)        }    }    @inject_unount    class BaseComponent extends Component {        }    //以后我们写组件时直接继承BaseComponent