Перехватчики 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, и предоставили три примера пользовательских хуков, которые вы можете использовать в своих проектах. Не стесняйтесь экспериментировать с ними и создавать свои собственные крючки!

Спасибо за прочтение и ознакомьтесь с некоторыми другими моими статьями:

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.