Если вы разработчик React, который еще не знаком с хуками React, сейчас самое время. В этом посте будет подробно рассмотрен хук useEffect React. Это эквивалент крючка швейцарского армейского ножа. Он решает множество проблем, например, как получить данные при монтировании компонента, как запустить код при изменении состояния или реквизита, как настроить таймеры или интервалы и так далее.
UseEffect используется практически для всего, что вы хотите «сделать» в компоненте React, который не возвращает JSX (любой тип побочного эффекта). У вас также может быть несколько useEffects для каждого компонента.
Вся эта мощь имеет свою цену: если вы не понимаете, как она работает, это может сбивать с толку. В этом посте мы рассмотрим множество примеров, чтобы вы могли понять концептуальную модель и применить ее к своему собственному коду.
Реагировать на хуки – Что он пытается решить?
Хуки были впервые представлены в React версии 16.8 и теперь используются во многих проектах React. Хуки решают проблему повторения кода между компонентами. Они написаны без использования классов. Это не означает, что React отказывается от классов; крючки - это просто альтернативный метод.
React позволяет быстро создавать сложные компоненты с логикой с отслеживанием состояния. Эти компоненты сложно разделить, поскольку класс основан на методах жизненного цикла React. Здесь на помощь приходят React Hooks.
Они позволяют разделить компонент на более мелкие функции. Вместо того, чтобы делить код на более мелкие части на основе методов жизненного цикла, теперь вы можете упорядочивать и разделять код на более мелкие блоки в зависимости от функциональности.
Что такое useEffect Hook?
Хуки — это функции, которые позволяют вам получить доступ к состоянию и другим возможностям реагирования без необходимости писать классы ES6. В API ответных хуков есть хук под названием useEffect. Если вы знакомы с жизненными циклами реакции, хук useEffect такой же, как и хук компонентдидмаунт, компонентдидобдатеи компонентWillUnmount комбинированные методы жизненного цикла.
Согласно документации React Hooks, он был создан для решения некоторых проблем с методами жизненного цикла компонентов класса ES6.
Синтаксис
Первый аргумент — это функция обратного вызова, которая по умолчанию выполняется после каждого рендера. Второй параметр — это необязательный массив зависимостей, который указывает перехватчику выполнять обратный вызов только в случае изменения целевого состояния.
Крючок сравнивает историческое и текущее состояние каждой зависимости. Если два значения не совпадают, хук вызывает обратный вызов, указанный в первом параметре. Массивы зависимостей изменяют обычное поведение обратного вызова и гарантируют, что хук игнорирует все остальные компоненты в области действия компонента.
Основное использование
Чтобы сохранить сообщение, я использую React useState в приведенном выше примере кода. После этого я беру свою переменную состояния сообщения и печатаю ее на экране. Однако теперь я хочу использовать эффект для изменения сообщения через секунду после того, как компонент был смонтирован.
Я вставил свой эффект за строку useState после импорта useEffect из среды React. Первый параметр useEffect — это функция. Когда этот обработчик функции выполняется, он позаботится о любых побочных эффектах, которые вы предоставляете. Функция представляет собой функцию обратного вызова, которая вызывается, когда происходит одно из событий жизненного цикла компонента React.
Когда это использовать?
Хук useEffect может быть полезен в различных ситуациях. Наиболее важными являются следующие:
- Мы можем изменить этот параметр со стороны клиента, когда хотим получить данные в зависимости от предоставленного аргумента. Он будет вызван после того, как параметр будет обновлен свежими данными.
- Если мы хотим получить данные из конечной точки API и отобразить их на стороне клиента. Когда наш компонент визуализируется, выполняется функция или обработчик, переданный хуку useEffect, и извлекаются данные в состояниях компонента. Затем эти статусы используются в компонентах пользовательского интерфейса.
- Когда ваш компонент использует данные из внешнего мира, и мы не можем гарантировать, что данные поступят, мы должны использовать эффект (возможно, сервер находится там). Вместо того, чтобы создавать проблемы и препятствовать отображению других компонентов, поместите их в хук useEffect.
Use cases
Если компонент повторно визуализируется после первого запуска, он не будет выполнен.
Всякий раз, когда компонент рендерится или повторно рендерится, он всегда должен выполняться.
По умолчанию программа запускается только один раз. После этого, если значения реквизита изменятся, запустите:
Для асинхронных действий всегда используйте useEffect.
Кодовые блоки useEffect являются очевидными маркерами асинхронных заданий для ваших коллег-разработчиков. Можно создать асинхронный код без использования useEffect, но это не «метод React», и он увеличивает как сложность, так и риск ошибок.
Использование useEffect вместо написания асинхронного кода, который может остановить пользовательский интерфейс, — хорошо известная техника в сообществе React, особенно способ, которым команда React создала его для выполнения побочного эффекта.
Еще одно преимущество его использования заключается в том, что разработчики могут просто просмотреть код и сразу же обнаружить код, который выполняется «вне потока управления», что становится важным только после первого цикла рендеринга. Кроме того, блоки подходят для извлечения в многоразовые и даже более семантические пользовательские хуки.
Пример
Используя код useEffect, увеличивайте число в секунду.
Заключение
Понимание основных принципов проектирования и лучших практик использования хука useEffect, на мой взгляд, является важным навыком, который необходимо изучить, если вы хотите стать разработчиком React следующего уровня.
Подводя итог, хук useEffect получает функцию, которая включает в себя императивную, потенциально полную логику эффекта. Массив зависимостей, который является вторым параметром, может использоваться для влияния на выполнение. При работе с ним также необходимо написать код очистки с помощью функции возврата.
Дайте нам знать в комментариях, была ли статья полезна.
Оставьте комментарий