Крючки на заказ, которые наверняка должны быть в вашем арсенале.
Пришли хуки, покорили React и потрясли все сообщество разработчиков. Прокрутка ленты Twitter вниз, не замечая слова крючки, в наши дни - редкость. И к этому дню, я надеюсь, вы смирились со своей судьбой и приняли их в свою кодовую базу.
Приходили ли вам эти мысли когда-нибудь в голову, когда вы закончили работу с фрагментом кода?
Как можно оптимизировать этот код? 🤔
Можно ли уменьшить количество строк?
Я хочу сделать код намного чище ...
Конечно, они это сделали, и нам на помощь пришли Custom hooks. Вы, вероятно, знаете, что такое нестандартные хуки, и скорее всего, вы могли бы их написать, если бы еще не прочитали мою предыдущую статью, в которой я учу искусству их написания.
Я предпочитаю меньше нажатий клавиш, чем перезаписывать монотонный и повторяющийся код.
СУХОСТЬ - это то, чего я жажду, и вы должны тоже.
Каждый раз, когда мы сталкиваемся с другой проблемой, писать собственные хуки может быть ужасно. Конечно, это сложно, и я знаю, что вы любите встречаться с ними, но бывают случаи, когда у вас не хватает времени или у вас есть какие-то сроки, которые вам нужно соблюдать.
Но благодаря нашему удивительному и ботанистому сообществу React мы уже получили тысячи таких хуков. Мы должны использовать их в полной мере, и именно для этого предназначен этот пост, чтобы вы узнали об этих замечательных крючках, которые должен иметь в своем арсенале каждый разработчик.
Без лишних слов, давайте разберемся, для чего вы здесь.
Примечание. Порядок в приведенном ниже списке не имеет смысла, он случайный.
Примечание. Вы можете найти и использовать все хуки из этой коллекции:
1. useArray hoo k
Манипуляции с массивами - это то, через что разработчик проходит каждый будний день. Добавление элементов в массив или удаление элемента по заданному индексу - для нас повседневная рутина. useArray снижает эту нагрузку, предоставляя нам различные методы работы с массивами. Этот крючок является частью пакета react-hanger.
Установка:-
yarn add react-hanger
Включить его в наш файл очень просто:
import {useArray} from 'react-hanger'
Использование:
Создание списка дел никогда не было таким простым. Мы предоставляем массив в хуке и получаем доступ к этим методам и массиву в объекте todos ниже.
О его реализации я рассказывал в своей предыдущей статье.
Для более детального ознакомления с хуком вы можете проверить компонент Bit или репозиторий GitHub.
2. перехватчик response-use-form-state
Формы есть повсюду, даже в самых маленьких приложениях, нам приходится сталкиваться с формами и управлять их состоянием. Управление состоянием формы в React иногда может быть немного громоздким.
react-use-form-state - это небольшой React Hook, который пытается упростить управление состоянием формы, используя привычные вам элементы ввода.
Установка:
npm i react-use-form-state
Использование:
formState имеет такую структуру:
{
"values": {
"name": "Mary Poppins",
"email": "[email protected]",
"password": "1234",
"plan": "free",
},
"validity": {
"name": true,
"email": true,
"password": false,
"plan": true,
},
"touched": {
"name": true,
"email": true,
"password": true,
"plan": true,
}
}
Это очень эффективный способ отслеживать состояние формы. Это еще не все, поэтому, пожалуйста, ознакомьтесь с документацией.
Для более детального ознакомления с хуком вы можете проверить компонент Bit или репозиторий GitHub.
3. реакция-выборка-крючок
Выполнение вызовов ajax - это самая простая и наиболее выполняемая задача для фронтенд-разработчика. И сообщество React достаточно быстро, чтобы создать ловушку для этой цели.
Установка:
npm i react-fetch-hook
Использование:
Нечего и говорить, ловушка useFetch получает данные и состояние isLoading.
Мы также можем предоставить объекту требуемых опций для ловушки.
Для более детального просмотра вы можете проверить компонент Bit или репозиторий GitHub.
4. Крючок useMedia
useMedia - это обработчик сенсора React, который отслеживает состояние медиа-запроса CSS. Все мы знаем, как важны медиа-запросы и насколько важна скорость отклика для любого сайта.
Использование:
Перехватчику предоставляется объект, который возвращает логический ответ.
Для более детального просмотра вы можете проверить компонент Bit или репозиторий GitHub.
5. Хук react-useportal
Порталы React предоставляют первоклассный способ рендеринга дочерних элементов в узел DOM, который существует вне иерархии DOM родительского компонента. И этот хук помогает нам в этом.
Установка:
yarn add react-useportal
Использование:
Это довольно просто использовать. Этот хук предоставляет нам два метода openPortal и closePortal (один открывает портал, а другой закрывает его), одно логическое значение isOpen для отображения статуса портала и компонент для обертывания содержимого портала. В этом крючке много всего, так что обязательно загляните в документацию.
Для более детального ознакомления с хуком вы можете проверить компонент Bit или репозиторий GitHub.
6. реагировать-firebase-hooks
Мы все ценим величие firebase и много используем ее в наших проектах, будь то для аутентификации или хранения. И этот хук нам действительно нужен.
Установка:
npm i react-firebase-hooks
Использование:
Ниже показан крючок useAuthState для аутентификации.
Ловушка оборачивается вокруг метода firebase.auth().onAuthStateChange(), чтобы гарантировать, что он всегда актуален.
Параметры: auth: firebase.auth.Auth
Возвраты: AuthStateHook, содержащие:
initialising: Если слушатель все еще ожидает загрузки пользователяuser:firebase.Userилиnull, если ни один пользователь не вошел в систему
Для более детального просмотра вы можете проверить компонент useAuthState Bit или репозиторий GitHub.
7. use-onClickOutside хук
Внешний щелчок - это способ узнать, нажимает ли пользователь все, кроме определенного компонента. Возможно, вы видели такое поведение при открытии раскрывающегося меню, модального или раскрывающегося списка.
Использование:
Мы предоставляем модальные или компонентные узлы для ссылки и передаем ссылку внутри нашего хука. Если есть щелчок за пределами этого модального окна, запускается функция закрытия.
Для более детального просмотра вы можете проверить компонент Bit или репозиторий GitHub.
8. Перехватчик useIntersectionObserver
Хук React для использования наблюдателей пересечения.
API-интерфейс Intersection Observer обеспечивает способ асинхронного наблюдения за изменениями пересечения целевого элемента с элементом-предком или с окном просмотра документа верхнего уровня.
Установка:
npm i react-use-intersection-observer
Использование:
Для более детального просмотра вы можете проверить компонент Bit или репозиторий GitHub.
9. крючок использования-местоположения
Название говорит само за себя, этот хук используется для получения местоположения браузера.
Использование:
Этот хук очень полезен и очень прост в использовании:
Более подробно о ловушке можно узнать с помощью компонента Bit, здесь.
10. крючок use-redux
Это для моих читателей redux. Этот хук возвращает свойство store и dispatch.
Установка:
yarn add use-redux
Использование:
Метод dispatch отвечает за запуск действий, вызывающих изменения в магазине. Это еще не все, так что ознакомьтесь с документацией.
Для более детального просмотра вы можете проверить компонент Bit или репозиторий GitHub.
Заключение
Я создал Битовую коллекцию для этих хуков, так что не стесняйтесь ее проверять.
В этой статье мы обсудили некоторые интересные вещи, связанные с Custom Hooks. Надеюсь, вам понравилась эта статья и вы узнали что-то новое, и если вы действительно хлопнули в ладоши, подписывайтесь на меня, чтобы получить больше контента на Medium, а также в Twitter. Пожалуйста, не стесняйтесь комментировать и спрашивать что угодно.
Я почти уверен, что пропустил много отличных пользовательских хуков, которые там обитают, так что расскажите мне в разделе комментариев, что я пропустил :)
Спасибо за чтение 🙏 💖.
