javascript - 为什么我的时钟代码会减慢我的网站速度

Question

我组装了一个基本的时钟来与 react 钩子(Hook)一起工作，但由于某种原因，套件确实减慢了我的网站速度。有什么理由会这样吗？

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 Hook 中。

像这样:

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>
    );
}