问题：在您当前的实现中，setInterval将在每次组件呈现时调用（即，也将在设置时间状态后调用）并将创建一个新的间隔- 如您的控制台中所见，这产生了这种“指数增长”。

正如评论部分所解释的：useEffect在 React 中处理功能组件时，这将是处理这种情况的最佳方式。看看我下面的例子。useEffect这里只会在初始组件渲染之后运行（当组件安装时）。

React.useEffect(() => {
  console.log(`initializing interval`);
  const interval = setInterval(() => {
    updateTime();
  }, 1000);

  return () => {
    console.log(`clearing interval`);
    clearInterval(interval);
  };
}, []); // has no dependency - this will be called on-component-mount

如果您只想运行效果并仅将其清理一次（在装载和卸载时），您可以传递一个空数组 ([]) 作为第二个参数。这告诉 React 你的 effect 不依赖于来自 props 或 state 的任何值，所以它永远不需要重新运行。

在您的场景中，这是“空数组作为第二个参数”的完美用法，因为您只需要在安装组件时设置间隔并在卸载时清除间隔。看看useEffect返回的函数。这是我们的清理功能，将在组件卸载时运行。这将“清除”，或者在这种情况下，在组件不再使用时清除间隔。

我编写了一个小应用程序，演示了我在此答案中涵盖的所有内容：https : //codesandbox.io/s/so-react-useeffect-component-clean-up-rgxm0?file=/ src/ App.js

我已经合并了一个小的路由功能，以便可以观察到组件的“卸载”。

我的旧答案（不推荐）：

每次组件重新渲染时都会创建一个新的时间间隔，这就是当您设置新的时间状态时发生的情况。我要做的是clearInterval在设置新间隔之前清除前一个间隔 ( )

try {
  clearInterval(window.interval)
} catch (e) {
  console.log(`interval not initialized yet`);
}

window.interval = setInterval(updateTime, 1000);

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

正如 Macro Amorim 所回答的那样，这useEffect是最好的方法。这里的代码：

useEffect(() => {
    const interval = setInterval(() => {
         const newTime = new Date().toLocaleTimeString();
         setTime(newTime);
    }, 1000)

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

在这种情况下，你可以使用 React 的 useEffect 钩子，在函数内部返回时，你可以使用 clearInterval 函数，我建议你查一下，useEffect 非常适合你想要做的事情。

你也可以试试这个——

import React, { useEffect, useState } from 'react';

export default function App() {
  const [timer, setTimer] = useState(0);
  const [toggle, setToggle] = useState(false);

  useEffect(() => {
    let counter;
    if (toggle) {
      counter = setInterval(() => setTimer(timer => timer + 1), 1000);
    }
    return () => {
      clearInterval(counter);
    };
  }, [toggle]);

  const handleStart = () => {
    setToggle(true);
  };

  const handleStop = () => {
    setToggle(false);
  };

  const handleReset = () => {
    setTimer(0);
    setToggle(false);
  };

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Current timer - {timer}</p>
      <br />
      <button onClick={handleStart}>Start</button>
      <button onClick={handleReset}>Reset</button>
      <button onClick={handleStop}>Stop</button>
    </div>
  );
}