如何使用react鈎子清理useEffect中的setInterval

Question

我正在嘗試創建一個加載組件，它將定期向div添加一個句點，每隔1000毫秒使用React中的setInterval。 我正在嘗試使用文檔中描述的方法清理setInterval。

https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1

import React, { useEffect, useState } from 'react'

const Loading = () => {
    const [loadingStatus, setLoadingStatus] = useState('.')
    const [loop, setLoop] = useState()
    useEffect(() => {
        setLoop(setInterval(() => {
            console.log("loading")
            setLoadingStatus(loadingStatus + ".")
        }, 1000))

        return function cleanup() {
            console.log('cleaning up')
            clearInterval(loop)
        }
    }, [])
    return (<p>
        {`Loading ${loadingStatus}`}
    </p>)
}
export default Loading

但是，loadStatus變量只更新一次，即使組件停止安裝，setInterval循環也不會被清除。 我是否必須使用類組件進行此操作？

Answer 1

依賴關系是我們提示React的效果何時應該運行，即使我們設置了一個間隔並且沒有提供依賴[] ，React也不會知道我們想要再運行一次因為我們的空依賴[]沒有真正改變。

為了獲得理想的結果，我們需要考慮什么時候才能運行效果？

我們希望在loadingStatus更改時運行它，因此我們需要添加loadingStatus作為我們的依賴項，因為我們希望每次loadingStatus更改時都運行該效果。

我們有2個選擇

添加loadingStatus作為我們的依賴項。

const Loading = () => {
  const [loadingStatus, setLoadingStatus] = useState(".");
  const [loop, setLoop] = useState();

  useEffect(
    () => {
      setLoop(
        setInterval(() => {
          console.log("loading");
          setLoadingStatus(loadingStatus + ".");
        }, 1000)
      );

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

  return <p>{`Loading ${loadingStatus}`}</p>;
};

讓我們的效果不知道我們使用loadingStatus

const Loading = () => {
  const [loadingStatus, setLoadingStatus] = useState(".");

  useEffect(() => {
    const intervalId = setInterval(() => {
      setLoadingStatus(ls => ls + ".");
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  return <p>{`Loading ${loadingStatus}`}</p>;
};

在這里閱讀更多內容=> a-complete-guide-to-useeffect