React setInterval 函数在重新渲染后一直在后台运行答案

【问题标题】：React setInterval function keeps running in the background after rerenderReact setInterval 函数在重新渲染后一直在后台运行
【发布时间】：2022-01-04 04:52:36
【问题描述】：

我在 useEffect 内使用 setInterval，在我的一个反应组件内使用空依赖数组。有真/假useState 控制该组件的显示。当状态为假时，组件被隐藏，当状态为真时，组件被显示。

类似这样的：

const [state, setState] = useState(false)

// in jsx render section

return (
   <div>
      {state? <component/> : '' }
   </div>
)

当组件第一次加载时，setInterval 只运行一次，这是它应该做的。

如果状态变为 false 然后又变为 true，则该组件将从 UI 中移除，然后再次显示回来。但是，这里发生的情况是，现在我在后台运行了两个 setInterval 函数，而第一个函数没有关闭。

setInterval 函数的数量随着组件的每次重新渲染而不断增加。

我不明白 React 在这种情况下是如何工作的。

我需要知道它是如何工作的（即为什么函数不会关闭，为什么函数的数量会增加）以及如何修复它。

【问题讨论】：

间隔不断运行，直到您通过clearInterval 明确停止它们。不是 React 的东西，这就是它们在 JS 中的工作方式。你说你只希望它运行一次，也许你想使用setTimeout。没有任何间隔的代码很难分辨
您需要共享您的组件代码。听起来您缺少useEffect cleanup 功能，该功能可用于在组件卸载时清除间隔。
是的，清理功能丢失了，当我添加它时一切正常。感谢您的评论，很抱歉没有编写整个代码，我只是认为这足以解释我的问题。

标签： javascript reactjs react-hooks setinterval use-state

【解决方案1】：

这是 React useEffect 的结构。React 在组件卸载时执行清理。

useEffect(() => {
    //effect
    return () => {
        //cleanup runs on unmount
    }
}, [])

清理函数应该有 clearInterval() ，它基本上会删除 setInterval 或在组件卸载时停止它。请看下面的实用代码：

let intervalid;
useEffect(
    () => {
     intervalid = setInterval(() => {console.log("Iterate");}, 1000));

      return function cleanup() {
        console.log("cleaning up");
        clearInterval(intervalid);
      };
    },
    []
  );

上面的代码只是为了理解方法。每个效果都可能返回一个在它之后进行清理的函数。这让我们可以保持添加和删除订阅的逻辑彼此接近。 # 来自反应文档Reference

【讨论】：