使用钩子清除 React 中的超时或间隔

Clear a timeout or an interval in React with hooks

要使用钩子清除 React 中的超时或间隔：

使用useEffect挂钩设置超时或间隔。
从useEffect钩子中返回一个函数。
使用clearTimeout()或clearInterval()方法删除组件卸载时的超时。

应用程序.js


import {useEffect, useState} from 'react';

export default function App() {
  const [isShown, setIsShown] = useState(false);

  useEffect(() => {
    const timeoutID = setTimeout(() => {
      setIsShown(true);
    }, 1000);

    return () => {
      // 👇️ clear timeout when component unmounts
      clearTimeout(timeoutID);
    };
  }, []);

  return (
    <div>
      {isShown ? (
        <div>
          <h2>isShown = true</h2>
        </div>
      ) : (
        <div>
          <h2>isShown = false</h2>
        </div>
      )}
    </div>
  );
}

反应清除超时

如果您需要清除间隔，请向下滚动到下一部分。

我们将一个空的 dependencies 数组传递给
useEffect挂钩，因为我们只想注册一次超时 – 当组件安装时。

请注意，您可以useEffect在同一组件中多次调用挂钩。

我们在钩子中使用了
setTimeout()
方法，useEffect但我们必须确保清除超时以避免内存泄漏。

例如，如果组件在计时器到期之前卸载并且我们没有清除超时，我们就会发生内存泄漏。

当组件卸载时，我们从useEffect钩子返回的函数被调用。

应用程序.js


useEffect(() => {
  const timer = setTimeout(() => {
    setIsShown(true);
  }, 1000);

  // 👇️ runs when component unmounts
  return () => {
    clearTimeout(timer);
  };
}, []);

我们使用
clearTimeout
方法来取消我们之前注册的超时。

如果组件在延迟到期之前卸载，该clearTimeout
方法将运行并取消超时。

使用
clearInterval
方法取消我们使用
setInterval注册的间隔时，方法是相同的。

应用程序.js


import {useEffect, useState} from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalID = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);

    // 👇️ cancel interval when component unmounts
    return () => {
      clearInterval(intervalID);
    };
  }, []);

  return (
    <div>
      <h2>Count: {count}</h2>
    </div>
  );
}

反应清除间隔

我们运行该clearInterval方法来取消我们之前在组件卸载时注册的时间间隔。

清理步骤很重要，因为我们要确保我们的应用程序中没有任何内存泄漏。

–