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

React 2月前 53

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

使用 useEffect 钩子设置超时或间隔。
从 useEffect 钩子返回一个函数。
使用 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>
  );
}