Пользовательские хуки в React!
Что такое настраиваемые крючки?
Пользовательские хуки — это те хуки, которые нам не дает react. мы создаем их сами.
Список крючков, которые нам дает react!
Первые десять хуков чаще всего используются в реагирующих хуках. Вы также можете проверить остальные пять, чтобы увидеть функции, которые они выполняют!
Зачем нам нужно создавать собственные пользовательские крючки🧐
пользовательские хуки помогают предотвратить ненужные дубликаты кода и повторный рендеринг. скажем, у нас есть логика компонентов, которая должна использоваться двумя или более компонентами.
В этом случае мы делаем запрос API для отображения информации о пользователе на домашней странице, а также когда пользователь переходит на страницу своего профиля.
Без создания пользовательского хука нам придется дублировать один и тот же код в нескольких компонентах, чтобы сделать запрос API, который извлекает данные пользователя, как это:
Давайте уделим некоторое время изучению приведенного выше кода.
Контроллер прерывания
Abortcontroller отменит любой ожидающий запрос, если пользователь решит размонтировать или перейти к новому компоненту.
функция fetch_user_info
Функция fetch_user_info делает запрос и обновляет состояние после монтирования страницы.
Функция очистки
Наконец, функция очистки запускается, когда пользователь отключается. Функция очистки вызывает Abortcontroller для отмены любого ожидающего запроса, а также устанавливает isMounted = false. Чтобы предотвратить обновление состояния, когда пользователь перешел к новому компоненту.
Создайте хук, который можно использовать в нескольких компонентах
Поскольку нам потребуется получить информацию о пользователях на нескольких страницах, давайте извлечем код, который мы написали, в один файл с именем useFetchUserDetails.jsx.
Вот и все,
вам понравился этот пост и тема? дайте мне знать ваши мысли о комментариях! 🤠 увидимся в следующий раз! 😊
