React Hooks: 如何以声明式方式使用 setInterval

2024-02-09 03:40:09

以声明式方式使用 setInterval

setInterval() 是 JavaScript 内置函数，用于以指定的间隔（以毫秒为单位）重复执行指定的函数。在 React 中，可以使用 useEffect Hook 来声明式地使用 setInterval()。

import { useEffect, useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return <div>Count: {count}</div>;
};

export default App;

处理计时器逻辑

在某些情况下，您可能需要在计时器函数中执行一些逻辑。例如，您可能需要在计时器触发时更新状态。在这种情况下，您可以使用计时器函数的返回值来访问计时器的 id。

import { useEffect, useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return <div>Count: {count}</div>;
};

export default App;

清除计时器

当组件卸载时，您需要清除计时器。这将防止计时器继续运行，即使组件不再存在。您可以使用 useEffect Hook 的清理函数来清除计时器。

import { useEffect, useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return <div>Count: {count}</div>;
};

export default App;