Реактивные крючки: новый способ работы с государством реагирования

Автор оригинала: Mihail Gaberov.

Обновлено: с реагированием 16,8, Реагировать крючки доступны в стабильном выпуске!

Устаревшие: крючки все еще являются экспериментальным предложением. В настоящее время они в реакции V16.7.0-Alpha

TL; DR В этой статье мы попытаемся понять, что такое Реактивные крючки И как их использовать для нашего хорошего. Мы реализуем разные примеры и видим различия (прибыль) Крючки приносят к нам. Если вы хотите пропустить чтение, здесь Вы можете найти более короткую версию в нескольких слайдах. И здесь ? Вы можете получить примеры и попробовать их самостоятельно.

Что такое реактивный крючки?

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

Крючки не работают внутри классов – они позволяют вам использовать реагирование без классов. А также, используя их, мы можем полностью избегать использования методов жизненного цикла, например ComponentDidmount , ComponentDidupdate , так далее. Вместо этого мы будем использовать встроенные крюки, такие как Useffect , Usemtioneffect или Uselayouteffect Отказ Мы увидим, как через мгновение.

Крючки – это функции JavaScript, но они налагают два дополнительных правила :

❗️. Только звоните крючки На верхнем уровне Отказ Не называйте крючки внутри петель, условий или вложенные функции.

❗️. Только звоните крючки Из компонентов функции RACT Отказ Не называйте крючки из обычных функций JavaScript. Существует только одно другое допустимое место для вызова крючков – свои собственные пользовательские крючки. Мы увидим их позже в этой статье.

Почему они хорошая вещь?

? R Дусивая логика До сих пор, если мы хотели повторно использовать какую-то логику в реакции, у нас было два варианта: h Компоненты Гирер-Заказать или р ender реквизит. С реактивными крючками у нас есть альтернатива, что с гораздо проще понять (в моем личном мнении!) Синтаксис и логический поток.

? G Компоненты IANT Избегая кода BoverPlate, нам нужно писать при использовании классов или путем удаления необходимости нескольких уровней вложенности (что может прийти при использовании рендеринга), React Clots решают проблему имеющих компонентов гигантов (которые действительно трудно поддерживать и отладки) Отказ

? C . Классы Onfusising Опять же, позволяя нам не использовать классы или компоненты класса в наших приложениях, облегчают жизнь разработчиков (особенно новичками). Это потому, что нам не нужно использовать ключевое слово «Это», и нам не нужно иметь понимание того, насколько привязываются и привязки работают в реакции (и JavaScript).

Это не значит, что мы (разработчики) не должны изучать эти концепции – наоборот, мы должны знать о них. Но в этом случае при использовании реактивных крюков наши заботы – один меньше?

Как использовать React Cloots?

Реактивные крючки приходят к нам как встроенные и Пользовательские Отказ Позднее мы можем использовать для обмена логикой в нескольких компонентах React.

Как мы уже узнали, крючки являются простыми функциями JavaScript, что означает, что мы будем писать только что, но в контексте Rect Функция компоненты. Ранее эти компоненты назывались без гражданства термин, который больше не действителен, как крючки Дайте нам способ использовать состояние в таких компонентах?

Следующие примеры пытаются иллюстрировать это.

Основные встроенные крючки

• Уместите Крючок – возвращает значение состояния и функцию обновления его.
• Useffect Крюк – принимает функцию, которая содержит императив, возможно, эффективный код (например, для получения данных или подписки на службу). Этот крючок может вернуть функцию, которая выполняется каждый раз, прежде чем эффект выполняется, и когда компонент размонтируется – чтобы очистить от последнего запуска.
• упреждающий текст Крючок – принимает контекст объект и возвращает текущий контекст значение, как указано ближайшим поставщиком контекста для данного контекста.

Пользовательские крючки

Пользовательский крючок – это функция JavaScript, имя которой начинается с « Использование », и это может вызвать другие крючки. Например, Используйте подписку Ниже приведен наш первый пользовательский крюк:

export default function useFriendName(friendName) {
  const [isPresent, setIsPresent] = useState(false);
  
  useEffect(() => {
    const data = MockedApi.fetchData();
    data.then((res) => {
      res.forEach((e) => {
        if (e.name === friendName) {
          setIsPresent(true);
        }
     });
    });
  });
    
  return isPresent;
}

Создание собственных пользовательских крючков позволяет экстрагировать логику компонентов в многоразовые функции. Это может быть общая функция вашего приложения, которую вы можете импортировать везде, где вам нужно. А также нельзя забывать, что наши пользовательские крючки – это другой допустимый ( см. Правила ) Места для вызова встроенных крючков.

Заключение

Реактивные крючки на самом деле не являются новой функцией, которая выскочила только сейчас. Они еще один (лучше ❓) способ делать реагировать компоненты, которые должны иметь Государство и/или жизненный цикл методы. На самом деле, они используют ту же внутреннюю логику, которая используется в настоящее время компонентами класса. Использовать их или нет – это вопрос, к которому будущее даст лучший ответ.

Давайте посмотрим, как сообщество отреагирует на предложение? И, надеюсь, мы увидим их полированные и полностью функционирующие в следующих реагированных релизах. ?

? Спасибо за прочтение! ?

использованная литература

Здесь вы можете найти ссылки на ресурсы, которые я нашел полезным при написании этой статьи:

• https://github.com/mihailgaberov/react-hooks /- Ссылка на REPO GitHUB с примерами и презентацией.
• https://mihailgaberov.github.io/react-hooks/ – Ссылка на презентационные слайды.
• https://reactjs.org/docs/hooks-intro.html – Официальные rectjs блог.
• https://youtu.be/dpw9ehdh2bm – Введение в крючки, Rect Conf 2018
• https://medium.com/@dan_abramov/makek-sense-of-react-hooks-fdbde8803889 – пояснительная статья Дэна Абрамова.
• https://daveceddia.com/useeffect-hook-examples/ – Очень полезная статья, объясняющая разные случаи использования крючкового крюка.
• https://ppxnl191zx.codesandox.io/ – пример библиотеки анимации реагирования, экспериментирующей с крючками.
• https://dev.to/oieduardorabelo/react-hooks-how-to-create-and-update-contextProvider-1f68 – Хорошая и короткая статья, показывающая, как создавать и обновлять провайдер контекста с помощью реактивных крюков.

Оригинал: “https://www.freecodecamp.org/news/hooking-with-react-hooks-964df4b23960/”