React组件销毁时清理异步操作和取消请求

[tiger5wang]

问题描述：

通常是 react 组件已销毁，但是组件中一些异步操作还未结束会报如下这个错误:

Warning: 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.

解决方法：

• 情况一：阻止异步操作

// 在组件卸载时，使用 setState 时直接返回
componentWillUmmount() {
    this.setState = (state, callback) => {
        return
    }
}

• 情况二：阻止请求（axios）

...
constructor(props) {
    this.state=store.getState()
    this.source = axios.CancelToken.source() //生成取消令牌用于组件卸载阻止axios请求
}
...
componentDidMount = () => {
    const _t = this
    const url="xxxx";
    axios.get(url, {
      cancelToken: _t.source.token
    })
      .then(res => {
      ...
      })
      .catch(function(thrown) {
        if (axios.isCancel(thrown)) {
          console.log('Request canceled', thrown.message);
        } else {
          console.log(thrown)
        }
      })
}
componentWillUnMount = () => {
    //阻止请求
    this.source.cancel('组件卸载,取消请求');
}

• 清除定时

constructor(props) {
    this.state=store.getState()
    this.timeout = null
    this.interval = null
}
...
componentDidMount = () => {
     this.timeout = setTimeout(() => {
        this.setState({a:123})
    },1000)

    this.interval = setInterval(() => {
      this.setState((prevState) => ({b: prevState.b++}))
    }, 1000)
}

componentWillUnMount = () => {
    this.timeout && clearTimeout(this.timeout)
    this.interval && clearInterval(this.interval)
}