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

要使用钩子清除 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>
  );
}

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

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

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

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

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

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

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

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

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

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

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