如何在React函数组件中正确设置一个setInterval定时器？

5 浏览
0 Comments

如何在React函数组件中正确设置一个setInterval定时器？

我刚开始学习React，并且在观看一个关于状态和钩子的教程。教程中只是每隔1000毫秒更新一次时间（或者我原以为是这样）。

代码如下：

import React from "react";
let count = 0;
function App() {
  const now = new Date().toLocaleTimeString();
  let [time, setTime] = React.useState(now);
  function updateTime(){
    const newTime = new Date().toLocaleTimeString();
    setTime(newTime);
    count++;
    console.log(count);
    console.log(new Date().getMilliseconds());
  }
  setInterval(updateTime, 1000);
  return (
      
{time}

      
  );
}
export default App;

教程的目的只是展示一个简单的例子，演示如何更新时间。但我注意到时间被多次（突发地）在每隔1000毫秒更新。我怀疑每次钩子变化时都会重新渲染新的组件，但旧的组件仍然在更新并产生更多的组件，导致每隔1000毫秒调用数呈指数级增长。

我非常好奇这里到底发生了什么？如果我想要一个每隔1000毫秒更新一次的简单计数器，我该怎么做？显然，`setTime(count)` 是不起作用的。

0