Для чего нужен ожидаемый возврат `useEffect`?

Question

В документации React для крючков сказано:

"Это также позволяет обрабатывать нестандартные ответы с местными переменная внутри эффекта "

useEffect(() => {
    let ignore = false;
    async function fetchProduct() {
      const response = await fetch('http://myapi/product/' + productId);
      const json = await response.json();
      if (!ignore) setProduct(json);
    }

    fetchProduct();
    return () => { ignore = true };
  }, [productId]);

Демонстрационное приложение

Пожалуйста, помогите мне лучше понять это, объяснив:

1. Почему функция возврата? return () => { ignore = true };
2. Для чего используется игнорируемый в этом примере?

Спасибо!

Answer 1

Почему функция возврата? return () => {ignore = true};

Из документов ,

Почему мы вернули функцию из нашего эффекта? Это необязательный механизм очистки для эффектов. Каждый эффект может возвращать функцию, которая очищается после него. Это позволяет нам поддерживать логику добавления и удаления подписок близко друг к другу. Они являются частью одного и того же эффекта!

И

Когда именно React очищает эффект? React выполняет очистку, когда компонент отключается. Однако, как мы узнали ранее, эффекты запускаются для каждого рендера, а не только один раз. Вот почему React также очищает эффекты от предыдущего рендера, прежде чем запускать эффекты в следующий раз. Мы обсудим, почему это помогает избежать ошибок и как отказаться от такого поведения в случае, если это создает проблемы с производительностью, ниже.

Для чего используется игнорируемый в этом примере?

Первоначально в useEffect Крюк ignore установлен как let ignore = false;. Когда функция fetchProduct выполняется, она проверяет, что ignore равно true, и, соответственно, устанавливает setProduct(json). Это означает, что у нас state называется product и устанавливается значение в state с помощью setProduct(json). Это product в состоянии используется для отображения деталей на странице.

Примечание: Поскольку [productId] передается в качестве второго аргумента useEffect, функция fetchProduct будет выполняться только при изменении productId.

См. оптимизация производительности путем пропуска эффектов .

Answer 2

Короче говоря, useEffect заменяет метод жизненного цикла componentDidMount. В основном это componentDidMount, componentDidUpdate, componentWillUnmount все в одном.