Блог

Главная - Вопросы по программированию - почему компонент отображается 3 раза?

почему компонент отображается 3 раза?

#javascript #reactjs #use-state

Вопрос:

У меня есть такой компонент, как этот:

 import { useEffect, useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  console.log("comp run");

  const tick = () => {
    setCount(count   1);
    console.log(count);
  };

  useEffect(() => {
    const timer = setInterval(tick, 10000);
    console.log("effect run");

    return () => {
      clearInterval(timer);
      console.log("clear func run");
    };
  }, []);

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

export default Counter;

Когда код запускается, консоль выводит следующие данные:

Вывод сразу же после запуска программы:

запуск компа

эффект запуска

через 10 секунд :

запуск компа

0

через 10 секунд :

запуск компа

0

через 10 секунд :

0 (затем он продолжает увеличиваться на 0 каждые десять секунд)

Чего я здесь точно не понимаю, так это того, что» comp run » печатается на экране 3 раза. Почему 3 ?

Комментарии:

1. потому что каждые 10 секунд вы обновляете счетчик, который перенаправляет ваш компонент

2. На самом деле, похоже, что вы не обновляете счетчик, так как он всегда равен 0.

3.Вы также можете подумать об использовании чего-то подобного, useInterval поскольку использование setInterval с эффектом может иметь странные побочные эффекты.

4. Попробуйте переключить setCount(count 1); на setCount(prevCount => prevCount 1);

Ответ №1:

Это происходит потому, что useEffect запоминает все значения внутри него. Вы можете использовать два способа:

  1. Добавьте count в массив зависимостей useEffect. И когда количество изменится, эффект использования будет обновлен. 
     useEffect(() => {
    //Your old code here
}, [count]); //Here
  1. Создайте функцию внутри крючка useCallback и запомните функцию для повышения производительности. Работает так же, как и в первом случае, но зависит от функции тика, которая зависит от состояния подсчета. 

     const tick = useCallback(() => {
  setCount(count   1);
  console.log(count);
}, [count]);

useEffect(() => {
  const timer = setInterval(tick, 1000);
  console.log("effect run");

  return () => {
    clearInterval(timer);
    console.log("clear func run");
  };
}, [tick]);


Метки: