Блог

Я использую 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]);
  

Объяснение, предоставленное @Powell Ye, хорошее, однако в нем содержится немного ошибочной информации, особенно когда речь идет о повторном рендеринге (например, при изменении реквизита)

рассмотрим какой-нибудь простой компонент со следующим

     useEffect( () => {
        console.log('Effect is applied')
        //some logic
        return () => {
            console.log('cleaning up')
            //cleanup logic
        }
    })
    return (<>
        {console.log('rendering...')}
     </>)
  

скажем, реквизиты, переданные в изменениях, которые вы могли бы подумать, что это происходит как таковой

1. «очистка»
2. новые реквизиты
3. ‘рендеринг…’
4. «Эффект применен»

Однако на самом деле происходит следующее

1. новые реквизиты
2. ‘рендеринг…’
3. «очистка»
4. «Эффект применен»

То есть функция очистки запускается ПОСЛЕ нового рендеринга / рисования, но ДО применения «новых» эффектов, документы могут быть немного двусмысленными по этому поводу

предыдущий эффект очищается перед выполнением следующего эффекта

Это сделано из соображений производительности => чтобы рендеринг не задерживался (для меня это тоже иногда может расстраивать)

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

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

Пример

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

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

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

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

Согласно документации react,

Очистка эффекта

Функция очистки запускается перед удалением компонента из пользовательского интерфейса, чтобы предотвратить утечки памяти. Кроме того, если компонент выполняет рендеринг несколько раз (как они обычно делают), предыдущий эффект очищается перед выполнением следующего эффекта.

Выбор времени эффектов

React всегда удаляет эффекты предыдущего рендеринга перед запуском нового обновления.

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