为什么我的时钟代码会减慢我的网站

Question

我整理了一个基本时钟来使用React Hooks，但是由于某种原因，Kit确实将我的网站放低了。有什么原因是吗？

function Welcome() {
    const [time, setTime] = useState(new Date());
    setInterval(() => clock(), 1000);
    function clock() {
        setTime(new Date());
    }
    return (
        <WelcomeBox>
            <WelcomeTime>
                {date.toLocaleString('en-US', {
                    hour: 'numeric',
                    minute: 'numeric',
                    hour12: true,
                })}
            </WelcomeTime>
        </WelcomeBox>
    );
}

Answer 1

您每次渲染时都会设置一个新间隔。

要正确地做我想正在尝试做的事情，您需要将setInterval放在useEffect钩中。

这样：

function Welcome() {
    const [time, setTime] = useState(new Date());
    useEffect(() => {
        const interval = setInterval(() => clock(), 1000);
        return () => clearInterval(interval)
    }, [])
    function clock() {
        setTime(new Date());
    }
    return (
        <WelcomeBox>
            <WelcomeTime>
                {date.toLocaleString('en-US', {
                    hour: 'numeric',
                    minute: 'numeric',
                    hour12: true,
                })}
            </WelcomeTime>
        </WelcomeBox>
    );
}

Answer 2

每次组件渲染时不要启动计时器

相反，您只能启动一次计时器。

使用setTimeout代替setInterval。

setTimeout等待时间量的时间，呼叫回调，然后走开，而 setInterval一遍又一遍地呼叫回调。

这是一个示例

function Welcome() {
    // ...
    function clock() {
         setTime(new Date());
         setTimeout(clock, 1000);
    }
    // ...
}

然后，您可以调用Clock((一次开始时钟。