🤔 Мотивация
Могли бы вы представить, что ваш код на React можно написать без беспорядочных фрагментов логики внутри компонентов? Хотели бы вы использовать некоторые части логики более одного раза наиболее элегантным способом? Вы попали в нужное место.
✨ Введение
Прежде чем мы начнем, вам нужно знать основные хуки (читайте мою предыдущую статью). Эти знания необходимы для начала.
🚀 Давайте создадим наш собственный крючок
Сегодня мы создадим хук useMediaQuery как отличный хук многократного использования.
Чтобы создать этот хук, нам нужно использовать прослушиватель изменения размера — создайте прослушиватель при монтировании компонента и удалите его при размонтировании. Поэтому нам нужно использовать жизненный цикл компонента.
Подготовим нашу функцию. Я подготовил тип MediaQueryType, потому что нам нужно знать тип правила медиа-запроса заранее.
Итак, теперь нам нужно создать функцию, которая проверяет соответствие медиа-запросам. Мы можем сделать это с помощью функции window.matchMedia().
Теперь нам нужно написать точную логику хука. Что нам на самом деле нужно сделать?
- создать прослушиватель при монтировании компонента
- проверить соответствие носителя при монтировании компонента (потому что мы хотели бы знать, совпадает ли носитель при монтировании или нет),
- удалить прослушиватель при размонтировании компонента
Здесь мы должны использовать жизненный цикл компонента с помощью хука useEffect и, конечно же, нам нужно где-то хранить логическое состояние, поэтому мы должны использовать useState.
Итак, наш крючок выглядит так
Но теперь — как это использовать? Это очень просто
🍟 Резюме
Как видите, создавать собственные крючки очень просто. Теперь вы можете писать повторно используемые функции, делать код намного чище и улучшать свои навыки программирования.
👍 Спасибо!
Надеюсь, вам действительно понравилась эта статья.
