如何处理以设定间隔卸载组件以避免内存泄漏

Question

我有一个 React 组件，它以倒计时计时器开始，当按下按钮或倒计时达到零时，组件将被卸载。是这样实现的：

state = {
  counter: 60,
};

componentWillMount() {
  this.doCountDown();
}

doCountDown() {
  if (this.state.counter < 1) {
    return this.props.tryAgain();
  }
  this.setState(prevState => ({ counter: prevState.counter - 1 }));
  setTimeout(() => this.doCountDown(), 1000);
}

这不是的副本。

在我这里的例子中，我有一个递归事件正在进行，所以我无法像 link 中提到的示例那样清除间隔。

有人知道该怎么做吗？

更多解释：this.props.tryAgain() 将更改更高的状态，导致此组件卸载。发生这种情况时，由于超时，状态仍会尝试在组件已卸载时更改。这表明存在内存泄漏，是一种不好的做法。所以我试图找到一个好的解决方法来防止这种情况发生。

Answer 1

您需要在卸载时调用 clearInterval 方法：

componentWillUnmount() {
    clearInterval(this.timeout)
}


doCountDown() {
    if (this.state.counter < 1) {
        return this.props.tryAgain();
    }
    this.setState(prevState => ({ counter: prevState.counter - 1 }));
    this.timeout = setTimeout(() => this.doCountDown(), 1000);
}

如何处理以设定间隔卸载组件以避免内存泄漏

How to handle unmounting a component with set interval to avoid a memory leak

memory-leaks

settimeout

setinterval

setstate

reactjs