通常,在从DOM上卸载组件之前,将清除计时器。但是,如果我们忘记清除计时器,会有什么副作用?
假设您timer在某个函数中调用,并且当您导航至另一个组件并且当前组件具有时unmounted,如果不清除计时器,则函数将继续执行。
timer
unmounted
因此,在该componentWillUnmount函数中,您需要清除计时器,该计时器可以通过以下方式返回:setInterval
componentWillUnmount
setInterval
如React DOCS中所述:
componentWillUnmount()在卸载和销毁组件之前立即调用。使用此方法执行任何必要的清除,例如使计时器无效,取消网络请求或清除在componentDidMount中创建的所有DOM元素。
componentWillUnmount()
例:
componentDidMount() { this.timerID = setInterval( () => this.somefunc(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); }
副作用:
考虑在计时器中进行API调用时从中获取显示在组件中的数据的情况。现在,如果您离开该组件,则通常不需要一次又一次地调用API,即使您不需要结果也是如此。这将在服务器上造成不必要的负载。