Рубрики
Без рубрики

React Effect Hook объяснил

Недавно я узнал о встроенном крючке React с использованием эффективного использования и позвольте мне сказать вам – это аккуратно! 💙 Это Ко … Tagged with React, JavaScript, Tulciory.

Я недавно узнал о встроенном React Использоватьэффект Крюк и позвольте мне сказать вам – это аккуратно! 💙 Обычно используется для извлечения данных из внешних API и обработки таймеров. Эта статья проведет вас через пошаговую реализацию компонента таймера через Использоватьэффект крюк.

Допустим, наш компонент таймера должен обновлять каждую секунду, как так:

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

import React, { useState } from "react";
import "./TimerDemo.css";

const TimerDemo = () => {
  const [seconds, setSeconds] = useState(0);

 setInterval(() => {
    setSeconds((s) => s + 1);
  }, 1000);

  return (
    

      
Timer Demo

      
⌛ {seconds} ⌛

    

  );
};

export default TimerDemo;

Однако приведенный выше код приведет к следующему выводу.

Что тут происходит? Реакция нарушила вселенную и изменил правила пространства -времени? 👽 Не совсем. Здесь происходит то, что несколько интервалов устанавливаются снова и снова в быстрой последовательности.

Когда компонент впервые отображается, устанавливается интервал, который меняет состояние секунды каждую секунду. После того, как состояние изменится, повторное рендеринг всего компонента сразу же запускается, и код внутри компонента снова работает. После запуска код приведет к тому, что другой, идентичный интервал установлен. Но старый интервал также продолжит делать свое дело и манипулировать состоянием секунды Анкет

Итак, теперь у нас есть два интервала, которые ведут себя одинаково: обновление состояния каждую секунду и запускает компонент для повторного рендеринга. Каждый повторный рендеринг приведет к установке более свежих интервалов, что, в свою очередь, вызовет изменение состояния. Этот цикл – петля с положительной обратной связью – будет повторять Infinitum (или, скорее всего, Browser -Crashium). 🔁

Правильный способ обработки таймеров в React – это использование великолепного Использоватьэффект крюк. Трое главных вещей, которые нужно знать об этом крючке:

  • он принимает Функция обратного вызова Как 1 -й аргумент
  • он принимает массив в качестве необязательного 2 -го аргумента
  • он возвращает NULL, но можно при желании быть настроенным, чтобы вернуть функция , что полезно для целей “очистки”
  • Эмоогитивно представлять, потому что для смайликов крюка еще нет поддержки смайликов крючков, так что вместо этого вот якорь (хорошо, этот был бонусом)

Мы рассмотрим, как каждый из этих точек относится к обработке таймеров в React. (Кроме эмодзи. Что нет.)

1. Используйте функцию обратного вызова

Первый аргумент, который принимает крюк, – это функция обратного вызова. Эта функция – это то, что React понимает как «эффект». В этом случае эффект – наш интервал. Давайте определим его внутри Использоватьэффект крюк.

const TimerDemo = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    setInterval(() => {
      setSeconds((s) => s + 1);
    }, 1000);
  });

  return (
    

      
Timer Demo

      
⌛ {seconds} ⌛

    

  );
};

Это будет отображаться в качестве следующего:

Совсем не то, что мы хотим, наша проблема остается. Вот где второй аргумент Использоватьэффект Крюк вступает в игру.

Использовать массив зависимостей

Второй аргумент – это необязательный массив значений состояния или PROP, которые указывают, когда должен работать эффект. У нас есть 3 варианта здесь:

  1. Нет массива: если массив не исключен, как в предыдущем фрагменте кода, эффект будет работать после каждый оказывать.
  2. Пустой массив: эффект работает Однажды После первоначального визуализации.
  3. Массив со состоянием или значениями PROP: эффект работает только Когда какое -либо из этих значений меняется.

В нашем случае, если мы пройдем в [Секунды] , мы бы говорили реагировать на то, чтобы повторно оказать эффект каждый раз, когда состояние секунды изменения. Что, конечно, было бы совершенно бессмысленным – на самом деле, это именно то, чего мы пытаемся избежать.

И избегайте этого, мы можем; В частности, пропуская пустой массив зависимостей, [] . Пустой массив говорит, что реагирует на то, чтобы запустить эффект только один раз, после того, как компонент впервые отображается. Давайте рассмотрим код ниже:

const TimerDemo = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    setInterval(() => {
      setSeconds((s) => s + 1);
    }, 1000);
  }, []);

  return (
    

      
Timer Demo

      
⌛ {seconds} ⌛

    

  );
};

Вуаля! Таймер работает сейчас.

Используйте функцию возврата

Но что будет с интервалом, если мы удалим компонент таймера из DOM? Давайте создадим сценарий, в котором он удаляется, завернув его в другой компонент, часы, которые переключает компонент таймера. Давайте также включим кнопку переключения, которая удаляет или добавляет компонент таймера в DOM.

const Clock = () => {
  const [isHidden, setIsHidden] = useState(false);
  const toggle = () => setIsHidden((hidden) => !hidden);

  return (
    

      {!isHidden && }
      
    

  );
};

На первый взгляд, удаление компонента TimerDemo из DOM, по -видимому, работает, как и предполагалось. Но после открытия консоли появляется злой море красного цвета. React не счастлив. 😡

Почему это? Что ж, когда компонент удаляется, несмотря на визуально исчезает, интервал, связанный с ним, просто продолжается. Нет ничего сказать, чтобы перестать выполнять. Интервал будет продолжаться, чтобы попытаться обновить состояние непревзойденного компонента в настоящее время, сильно расстраивая реагирование в процессе. Бедный отреагируйте! 🥺

Итак, как мы можем сказать, что интервал остановится, когда компонент удален из DOM? Указав Использоватьэффект Возвратное значение. По умолчанию он возвращает NULL, но мы можем изменить это, чтобы вернуть функцию обратного вызова, которая будет действовать как «очистка». Предупреждение: функция очистки может показаться немного абстрактной для чтения, и лучший способ подружиться с ней-использовать ее и изучить его функциональность из первых рук.

Очистка выполняется в следующее время:

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

Давайте определим нашу функцию очистки. Чтобы остановить интервал, нам нужно запечатлеть интервал и передать его в ClearInterval Функция (концепция ванили JS). Мы вернем эту функцию внутри нашей Использоватьэффект и добавьте несколько операторов печати для мониторинга последовательности выполнения.

  useEffect(() => {
    console.log("I am the effect. PARTY! 🎺 👐 🎉");
    const timerId = setInterval(() => {
      setSeconds((s) => s + 1);
    }, 1000);

    return () => {
      console.log("Cleaning up... 🙄 🧹🧼");
      clearInterval(timerId);
    };
  }, []);

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

Я надеюсь, что вы тоже, после прохождения этого учебника! 👏

Оригинал: “https://dev.to/sanspanic/react-effect-hook-explained-4npg”

Читайте ещё по теме: