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

1. 问题描述:

通常是 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.

2. 解决方法:

• 情况一: 阻止异步操作

• componentWillUnmount() {
    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('组件卸载,取消请求');
  }
  

• 情况三: 清除定时

• var timer;
  ...
  componentDidMount = () => {
       timer = setTimeout(() => {
          this.setState({a:123})
      },1000)
  }
  componentWillUnMount = () => {
      clearTimeout(timer)
  }