javascript - react setInterval 和 useState

Question

我有 2 个问题。首先，为什么这段代码不起作用。其次，为什么这段代码在 2^n -1 例如 1-3-7-15 时变慢

let time = 0
function App() {
  const [mytime, setMytime] = useState(time)
  setInterval(() => {
    time += 1
    setMytime(time)
  }, 1000)
  return <div> {mytime} </div>

Answer 1

问题

setInterval 每次当 mytime 更改以重新呈现时(当您调用 setMytime 时)都会被调用。 setInterval 调用的次数呈指数级增长。这也会导致内存泄漏。

解决方案

您应该只运行一次。您应该使用带有空依赖项数组的 useEffect Hook 。

像这样尝试。

import { useEffect, useState } from "react";

function App() {
  const [mytime, setMytime] = useState(0);

  useEffect(() => {
    // create a interval and get the id
    const myInterval = setInterval(() => {
      setMytime((prevTime) => prevTime + 1);
    }, 1000);
    // clear out the interval using the id when unmounting the component
    return () => clearInterval(myInterval);
  }, []);

  return <div> {mytime} </div>;
}

export default App;