С тех пор, как я изучил React во время моего Flatiron Bootcamp, я быстро освоился с новым стилем компонентов React, которые отошли от традиционных компонентов класса. Приняв новый стиль разработки хуков React с самого начала своего пути обучения, я подумал, что это избавит меня от любых трудностей перехода, которые могут возникнуть в будущем, когда я решил бы присоединиться ко всем остальным с их причудливыми хуками React.
Это, на мой взгляд, оказалось хорошим ходом, позволяющим мне писать компоненты так, как кажется более правильным, за неимением лучшего слова. Хуки решают широкий спектр проблем, например, громоздким приходилось читать шаблоны, такие как свойства рендеринга и компоненты более высокого порядка или компоненты, вырастающие до неуправляемых размеров, содержащие беспорядок логики с отслеживанием состояния и побочные эффекты. Хуки сделали React проще.
Приняв такой образ жизни, мне пришлось изучить большинство встроенных хуков, таких как useState(), useMemo(), useRef() и useEffect(). Все они имеют подробные объяснения с отличной документацией Reacts. Но одна вещь, с которой я боролся, — это концепция создания собственных крючков. По какой-то причине я не могу понять концепцию или когда их реализовать полезным способом. Поэтому в этой статье я собираюсь задокументировать свой путь к их пониманию до уровня компетентности, необходимого для их успешного использования.
Что такое пользовательский хук?
Пользовательские хуки позволяют создавать функциональные возможности, которые можно повторно использовать в разных компонентах. Конечно, вы можете просто использовать функции для повторного использования функциональности, но преимущество хуков заключается в том, что они могут «прицепляться» к таким вещам, как жизненный цикл и состояние компонента. Это делает их гораздо более ценными в мире React, чем обычные функции.
Что делает пользовательский крючок? Пользовательский хук — это просто функция, которая использует другие хуки. Если вы не используете никаких хуков в своей функции, это просто функция, а не хук.
Давайте попробуем создать собственный хук
Чтобы показать вам пример пользовательского хука, я собираюсь написать простой хук, который действительно может быть полезен в реальном мире.
По соглашению имя функции-ловушки должно начинаться с «использовать». Это не обязательно, но если это не так, люди не поймут, что это крючок.
Итак, давайте назовем наш хук yseBodyScroolPosition.
Идея состоит в том, что каждый раз, когда тело документа прокручивается, хук срабатывает и возвращает текущее смещение прокрутки. Это может быть полезно в тех случаях, когда вам нужно переместить компонент на странице или каким-либо образом изменить его в ответ на прокрутку.
Конечно, вы можете сделать это только внутри своего компонента, но тогда это нельзя будет использовать повторно в других компонентах, что является одним из основных преимуществ хуков.
Итак, давайте посмотрим на код:
Это коротко и мило, но под всей этой абстракцией скрывается многое. Итак, давайте разберем его по частям.
Во-первых, мы импортируем хуки useState() и хуки useEffect() из React, которые будут использоваться в нашем пользовательском хуке. Хуки разрешено использовать только внутри компонентов или внутри других хуков, иначе это вызовет ошибки консоли. Поскольку мы ставим «использовать» перед именем нашего хука, реакция идентифицирует эту функцию как хук.
Затем мы создаем функцию, в данном случае со стрелочным синтаксисом ES6, который, как мне кажется, является более чистым способом написания функций.
Затем, наконец, внизу документа мы экспортируем этот хук по умолчанию, чтобы его можно было импортировать в компоненты или другие хуки.
Мы используем хук useState(), чтобы передать хуку переменную состояния. В этом примере мы используем его для хранения положения прокрутки окна браузера.
По умолчанию он равен нулю, который всегда будет возвращаться при первом вызове хука. Это значение будет меняться только при наличии события прокрутки, до тех пор оно останется нулевым. Изменения потребуются, если вы хотите, чтобы он возвращал текущее смещение до любой прокрутки.
Каждый раз, когда срабатывает событие прокрутки, состояние обновляется, функция ловушки вызывается снова с последним состоянием и возвращает смещение прокрутки вызывающему компоненту.
Основная логика пользовательского хука на самом деле содержится в другом реагирующем хуке, который называется useEffect().
useEffect() обеспечивает настройку прослушивателя событий при монтировании ловушки. Функция, возвращаемая функцией useEffect, будет вызываться, когда хук будет размонтирован, и это будет очищено путем удаления прослушивателя событий. Если мы этого не сделаем, он попытается установить состояние на несмонтированный хук при срабатывании.
Второй аргумент useEffect(), пустой массив зависимостей, гарантирует, что эффект вызывается только один раз при первом монтировании хука. Мы не хотим продолжать добавлять прослушиватель событий!
Наконец, в конце хука мы возвращаем последнюю позицию прокрутки.
Вот пример его использования в компоненте. Все, что он делает, это помещает значение прокрутки в середину окна, обновляя его при вертикальной прокрутке.
Вывод
Это простой пользовательский хук React, но он показывает, насколько полезным может быть базовый хук. Этот хук можно повторно использовать среди различных компонентов или хуков, чтобы добавить довольно продвинутую функциональность.
Этот веб-сайт содержит различные полезные хуки, которые можно добавить в любой проект React. Взгляните на него для вдохновения!
В общем, создавать собственные хуки очень просто!
