Хуки React — это мощная функция, представленная в React 16.8, которая позволяет нам использовать состояние и другие функции React в функциональных компонентах. Они могут помочь нам сохранить наш код чистым и модульным, извлекая логику в повторно используемые части.
Одним из наиболее распространенных применений пользовательских хуков является инкапсуляция функций, которые используются в нескольких компонентах. В этом руководстве мы рассмотрим, как создавать собственные хуки React и как использовать их в наших компонентах.
Создание простого пользовательского хука
Давайте начнем с простого примера пользовательского хука, который управляет счетчиком. Этот хук будет поддерживать состояние счетчика и предоставлять функции для его увеличения и уменьшения.
Во-первых, давайте создадим новый файл для нашего хука, useCounter.tsx:
Здесь мы используем хук useState для создания переменной состояния для нашего счетчика, а хук useCounter принимает начальное значение в качестве аргумента. Функции increment и decrement просто обновляют счетчик, добавляя или вычитая 1.
Теперь мы можем использовать этот пользовательский хук в наших компонентах следующим образом:
Здесь мы видим, что мы используем хук useCounter для создания нашего состояния счетчика и функций увеличения/уменьшения, а затем рендерим состояние и кнопки в нашем компоненте.
Использование Axios с пользовательскими хуками
Еще один распространенный вариант использования пользовательских хуков — выполнение вызовов API с помощью Axios. Давайте создадим новый хук, который извлекает данные из конечной точки API и возвращает данные ответа. Если вы новичок в разработке интерфейса, вот статья, в которой обсуждаются преимущества Axios по сравнению со встроенным API выборки.
Во-первых, давайте установим Axios:
npm install axios -----or----- yarn add axios
Далее давайте создадим наш пользовательский хук useApi.tsx:
Здесь мы используем хук useState для управления состоянием данных ответов нашего API, состояния загрузки и ошибок. Хук useApi принимает URL-адрес и параметры Axios в качестве аргументов и использует axios для вызова API и соответствующего обновления состояния.
Здесь мы импортируем хук useApi из нашего файла useApi.ts и вызываем его с конечной точкой, к которой мы хотим попасть, и методом HTTP, который мы хотим использовать. Хук возвращает объект, содержащий текущее состояние вызова API, а также функцию callApi, которую мы можем использовать для запуска вызова.
Затем мы создаем функцию handleClick, которая вызывает callApi при нажатии кнопки и условно визуализирует загрузку, данные и состояния ошибок на основе текущего состояния вызова API.
Вот и все! С помощью этого простого пользовательского хука мы можем легко обрабатывать вызовы API во всем нашем приложении.
Структура файла для нашего пользовательского хука:
src/ |- hooks/ | |- useApi.ts |- components/ |- MyComponent.tsx
Я надеюсь, что это дало вам представление о том, насколько мощными и гибкими могут быть пользовательские хуки в приложении React. Удачного кодирования!
