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 參考