Кастомные хуки позволяют извлекать логику компонентов в повторно используемую функцию, что повышает разделение компонентов и надежность. Приступим к рассмотрению пятнадцати React hooks, которые сделают ваш компонент легковесным.
1. useIdle
С помощью useIdle можно отслеживать, находится ли пользователь на странице в режиме ожидания. Можете передать два параметра: ms – время ожидания и initialState , который позволяет пользователю изначально установить режим ожидания.
2. useInterval
Этот хук можно использовать для функций с интервалами, которые автоматически размонтируют компонент clearInterval . Он также позволяет приостановить интервал, установив задержку равной нулю.
3. useScroll
Используется для прослушивания события прокрутки элемента и перерисовки при прокрутке. Не требует ручного добавления слушателей событий JavaScript.
4. useToggle
С помощью useToggle можно переключаться между двумя состояниями: TRUE и FALSE. Такой подход уменьшает «ручную» логику.
5. useTitle
Хук используется для установки заголовка страницы.
6. usePrevious
Чтобы получить предыдущее состояние, можно юзать этот хук. Возможно вам даже не потребуется писать кастомную логику и что-то допиливать.
7. useSetState
Этот крючок используется для объединения объектов в их текущем состоянии, аналогично this.setState в компоненте класса. Если вы используете несколько состояний, их можно привести к одному с помощью useSetState .
8. useCookie
Хук используется для возврата текущего значения cookie , обратного вызова обновления и удаления cookie .
9. usePermission
usePermission следует применять для получения p ermissio n -статуса API браузера. Передайте имя API, чтобы получить статус.
10. useDebounce
Хук используется для задержки события до завершения времени ожидания. В приведенном ниже коде заданное состояние выполняется после завершения времени ожидания:
11. useGeolocation
Этот хук выгодно применять для получения геолокации пользователя. useGeolocation возвращает широту, долготу, высоту и другую полезную информацию.
12. useNetworkState
Приведенный ниже код используется для получения сетевого статуса браузера. useNetworkState можно применять для показа пользователю состояния подключения.
13. useCopyToClipboard
Хотите скопировать текст в буфер обмена? useCopyToClipboard – именно то, что вам необходимо.
14. useFavicon
Крючок useFavicon используется для установки иконки на странице.
15. useError
Применяйте useError для контроля и отправки ошибок.
Заключение
В репозитории react-use на GitHub есть еще несколько настраиваемых хуков. Надеюсь, вы сочтете их полезными. Спасибо за внимание!