迹忆客 专注技术分享

要使用钩子清除 React 中的 timeout 或 interval：

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

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>
  );
}

如果我们需要清除 interval，请向下滚动到下一部分。

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

请注意 ，我们可以在同一组件中多次调用 useEffect 钩子。

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

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

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

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

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

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

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

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

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 方法来取消我们之前在组件卸载时注册的时间间隔。

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