React setInterval function 在重新渲染后继续在后台运行

Question

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

像这样的东西：

const [state, setState] = useState(false)

// in jsx render section

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

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

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

每次组件重新渲染时，setInterval 函数的数量都会不断增加。

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

我需要知道它是如何工作的以及如何解决它。

Answer 1

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

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

清理 function 应该有 clearInterval() 这将基本上删除 setInterval 或在组件卸载时停止它。 请参阅下面的实用代码：

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

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

上面的代码只是为了理解方法。 每个效果都可能返回一个 function ，在它之后进行清理。 这让我们可以保持添加和删除订阅的逻辑彼此接近。 # FROM REACT DOCS 参考