在卸载组件之前是否真的有必要清除计时器?

5 reactjs

通常在从DOM卸载组件之前清除计时器.但是如果我们忘记清除计时器会有什么副作用?

Shu*_*tri 5

假设您在某个函数中调用 a timer,当您导航到另一个组件并且当前组件有 时unmounted,如果您不清除计时器,您的函数将继续执行。

因此,在该componentWillUnmount函数中,您需要清除计时器,该计时器可以通过返回的数值来识别setInterval

正如 React DOCS 中提到的:

componentWillUnmount()在组件被卸载和销毁之前立即调用。在此方法中执行任何必要的清理,例如使计时器无效、取消网络请求或清理在 componentDidMount 中创建的任何 DOM 元素

例子:

componentDidMount() {
    this.timerID = setInterval(
      () => this.somefunc(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }
Run Code Online (Sandbox Code Playgroud)

副作用:

考虑这样一种情况,您在计时器中进行 API 调用,从中获取在组件中显示的数据。现在,如果您离开该组件,即使不需要结果,您通常也不会希望一次又一次地调用 API。这将导致服务器上不必要的负载。