Когда запускается функция очистки при использовании useEffect с зависимостями? - PullRequest
Новая
       27

Когда запускается функция очистки при использовании useEffect с зависимостями?

3 голосов
/ 13 марта 2019

Я использую этот useEffect для отображения загрузки пользовательского интерфейса ... но только после 250 мс.Это работает ... но я действительно не понимаю, почему и особенно, как и когда useEffect вызывает функцию возврата (которая сбрасывает время ожидания).

Ну ... Я не уверен, что это работает отлично.Иногда должно появиться «Загрузка ...», но это не так. 

 const [loadingAfterShortTime, setLoadingAfterShortTime] = useState(false);

 useEffect(() => {
  setLoadingAfterShortTime(bool => false);
  if (myDepandanceToTrigTheLoadingWord === true) {
    const id = setTimeout(() => {
      setLoadingAfterShortTime(bool => true);
    }, 250);
    return () => {
      clearTimeout(id);
    };
  }
}, [myDepandanceToTrigTheLoadingWord]);

1 Ответ

1 голос
/ 14 марта 2019

Вот краткое описание задействованных временных параметров:

  • useEffect вызывается при первоначальном рендеринге и всякий раз, когда любое из значений зависит от изменения.Как правило, он срабатывает после завершения рендеринга.Если вы думаете об этом с точки зрения компонента на основе классов, эквивалентным будет componentDidMount метод.
  • Функция, возвращенная из useEffect, вызывается до того, как компонент удален из пользовательского интерфейса или собираетсяперерисовать (чтобы избежать утечек памяти).Предыдущий эффект всегда очищается перед выполнением следующего эффекта.Он гарантированно работает до любых новых рендеров.Эквивалент будет componentWillUnmount.

Пример

Предположим, что существует useEffect с несколькими зависимостями, сделанными из реквизита (которые передаются нашему компоненту) + функция очистки,При первом рендеринге произойдет следующее:

  • Как только компонент смонтирован, будет запущен код внутри тела эффекта;
  • Функция очистки остается на месте и готова к запуску до того, как компонент перезапустится.-renders / удален с экрана.

Теперь один из реквизитов изменяется, что вызывает повторную визуализацию.Поскольку он указан как что-то, от чего зависит useEffect, эффект будет повторно выполнен следующим образом:

  • Функция очистки запускается непосредственно перед новым циклом рендеринга;
  • После завершения рендеринга,будет выполнен код внутри тела эффекта;
  • Новая функция очистки создана, снова готова к выполнению до того, как компонент будет повторно визуализирован / удален с экрана.
...