Почему мой код часов замедляет мой сайт - PullRequest
0 голосов
/ 25 июня 2019

Я собрал базовые часы для работы с ловушками реагирования, но по какой-то причине комплект действительно замедляет мой сайт.Любая причина, почему это будет?

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

Ответы [ 2 ]

2 голосов
/ 25 июня 2019

Вы устанавливаете новый интервал каждый раз, когда компонент выполняет рендеринг.

Чтобы правильно делать то, что, я думаю, вы пытаетесь сделать, вам нужно поместить свой 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>
    );
}
0 голосов
/ 25 июня 2019

Не запускайте таймер каждый раз, когда компонент рендерит

Вместо этого вы должны запускать таймер только один раз.

Используйте setTimeout вместо setInterval.

setTimeout ожидает указанное количество времени, вызывает обратный вызов и уходит, в то время как setInterval вызывает обратный вызов снова и снова с задержкой между вызовами.

Вот пример

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

Затем вы можете вызвать clock () один раз, чтобы запустить часы.

...