reactjs React setInterval和useState

kcwpcxri  于 2023-04-05  发布在  React
关注(0)|答案(2)|浏览(208)

我有两个问题。第一,为什么这个代码不工作。第二,为什么这个代码慢,当它来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>
f4t66c6m

f4t66c6m1#

问题

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

溶液

你应该只运行一次。你应该使用一个空的依赖数组的useEffect钩子。
像这样试试。

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;

gab6jxml

gab6jxml2#

为了扩展@Amila的回答,

使用functions设置startstopreset定时器怎么办?

1.确保使用useRef(),因为useState()将导致渲染。
1.请确保卸载useState()中的间隔,因为这将导致跳过计时器。

useEffect(() => {
     return () => clearInterval(currentTimer.current);
 }, []);

使用以下代码:

const [time, setTime] = useState(0);
    const currentTimer = useRef();
    useEffect(() => {
        return () => clearInterval(currentTimer.current);
    }, []);
    const startTimer = () => {
        currentTimer.current = setInterval(() => {
            setTime((prev) => prev + 1);
            console.log(time);
        }, 1000);
    };
    const stopTimer = () => {
        clearInterval(currentTimer.current);
    };
    const resetTimer = () => {
        clearInterval(currentTimer.current);
        setTime(0);
    };
    return (
        <div>
            <div>{time}</div>
            <button onClick={startTimer}>Start</button>
            <button onClick={stopTimer}>Stop</button>
            <button onClick={resetTimer}>Reset</button>
        </div>
    );

相关问题