Перехватчики React — это мощная функция, представленная в React 16.8, которая позволяет вам повторно использовать логику с отслеживанием состояния между компонентами. С помощью хуков вы можете писать повторно используемый и компонуемый код, который легко тестировать и поддерживать.
В этой статье мы рассмотрим, как создавать пользовательские хуки React в TypeScript, и предоставим три примера пользовательских хуков, которые вы можете использовать в своих проектах.
Что такое React-хуки?
Хуки React — это функции, которые позволяют вам использовать состояние и другие функции React без написания класса. Вместо использования методов жизненного цикла или HOC вы можете использовать хуки для управления состоянием, побочными эффектами и многим другим.
Хуки бывают двух типов: встроенные хуки и пользовательские хуки. Встроенные хуки, такие как useState
, useEffect
и useContext
, предоставляются React и могут использоваться «из коробки». Пользовательские хуки, с другой стороны, — это функции, которые вы определяете сами и можете повторно использовать в компонентах.
Создание пользовательского хука React в TypeScript
Создать собственный хук легко. Это просто функция, которая использует один или несколько встроенных хуков для управления состоянием и возвращает значение или набор значений.
Вот пример простого пользовательского хука, который управляет логическим флагом:
Этот хук использует встроенный хук useState
для управления логическим значением и возвращает массив, который включает текущее значение и функцию для переключения значения.
Чтобы использовать этот хук в компоненте, вы можете просто вызвать его и деструктурировать результат:
Этот компонент использует хук useToggle
для управления логическим состоянием и отображает кнопку, которая переключает состояние.
Примеры пользовательских хуков React в TypeScript
Вот еще три примера пользовательских хуков, которые вы можете использовать в своих проектах:
использованиеLocalStorage
Этот хук позволяет вам сохранять значение в localStorage и синхронизировать его с переменной состояния:
Чтобы использовать этот хук, вы можете вызвать его с ключом и начальным значением:
использованиеDebounce
Этот хук позволяет отменить дребезг функции обратного вызова и отложить ее выполнение:
Чтобы использовать этот хук, вы можете вызвать его со значением и задержкой:
использованиеMediaQuery
Этот хук позволяет вам обнаружить текущий медиа-запрос и обновить переменную состояния:
Чтобы использовать этот хук, вы можете вызвать его с помощью медиа-запроса:
Заворачивать
Пользовательские хуки React — это мощный способ повторного использования логики с отслеживанием состояния между компонентами. С помощью TypeScript вы можете обеспечить безопасность типов и предотвратить распространенные ошибки программирования.
В этой статье мы рассмотрели, как создавать пользовательские хуки React в TypeScript, и предоставили три примера пользовательских хуков, которые вы можете использовать в своих проектах. Не стесняйтесь экспериментировать с ними и создавать свои собственные крючки!
Спасибо за прочтение и ознакомьтесь с некоторыми другими моими статьями:
- React-Leaflet v3: Создание картографического приложения
- Как создать пользовательский компонент слоя в React-Leaflet v3 с помощью Leaflet.Ellipse
- Как создать компонент управления React-Leaflet с помощью Leaflet-Routing-Machine
- Как создать собственный элемент управления Geoman с помощью React-Leaflet и Leaflet-Geoman-Free
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.