React技巧之用钩子clearTimeout

原文链接：https://bobbyhadz.com/blog/react-cleartimeout (opens new window)

作者：Borislav Hadzhiev (opens new window)

正文从这开始~

总览

要在React中用钩子清除一个超时或间隔：

1. 使用useEffect钩子设置一个setTimeout 或者setInterval。
2. 从useEffect钩子中返回一个函数。
3. 在组件卸载时，使用clearTimeout()或者clearInterval()方法来移除定时器。

// App.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>
  );
}

clearTimeout

如果你需要清理间隔，请往下翻到下一节。

我们给useEffect 钩子传递空的依赖数组，因为我们只需要当组件挂载时，注册定时器一次。

需要注意的是，你可以在相同的组件中多次调用useEffect 钩子。

我们在useEffect 钩子中使用setTimeout()方法，但是我们必须确保清除定时器，防止内存泄漏。举例来说，如果组件在定时器到期前卸载，而我们没有清除定时器，我们就会有一个内存泄漏。

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

// App.js

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

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

我们使用clearTimeout方法来取消之前注册的定时器。如果组件在延迟结束前卸载，clearTimeout方法会运行并取消定时器。

clearInterval

同样的，我们可以使用clearInterval方法取消间隔，使用setInterval 注册间隔。

// App.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 方法来取消先前注册的间隔。

总结

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