Зачем нужны крючки?
Раньше React предлагал props-rendering и компоненты более высокого порядка, которые позволяли повторно использовать ваш код. Но было трудно следить и понимать. Возникает необходимость использования хуков в реакции, что в основном позволяет вам повторно использовать логику с отслеживанием состояния, не нарушая иерархию компонентов. Это позволяет разделить код на более мелкие функции. В магазине уже доступны некоторые хуки для использования, например, useEffect, useState, useContext. Вы можете просто позвонить им, и все готово.
Но по мере того, как ваш код становится сложным, вам нужно больше контроля над ним, что вы можете сделать, создав свой собственный хук, соответствующий потребностям вашего собственного проекта. Итак, приступим:
Что мы создаем?
В этом руководстве мы создадим собственный хук для получения данных о странах из API. мы будем использовать Countries API.
- Мы привезем и вернем все страны, если не будет возражений.
- Если в аргументе указано название страны, мы вернем данные только этой страны.
- Пример использования пользовательского хука:
Предварительные требования:
В этом руководстве мы предполагаем, что вы уже знакомы с основными понятиями Javascript и React.
Настройка для учебника:
custom-hook — это имя моего приложения для реагирования, вы можете назвать его как угодно. После создания приложения вы можете изменить каталог на свое приложение и запустить «yarn start», чтобы проверить, работает ли ваше приложение в браузере на локальном хосте.
Затем создайте useCountry.js в папке src.
Примечание. Вы должны использовать ключевое слово «использовать» с вашим хуком, чтобы реакция могла распознать, что это хук.
Шаг 1. Напишите функционал для своего хука.
Примечание: вы можете использовать другие хуки в своем пользовательском хуке.
Шаг 2. Вызовите и разрушьте хук в основном компоненте.
Шаг 3. Запустите код.
Теперь вы можете увидеть ответ вашего первого пользовательского хука в консоли браузера.
Код хука также доступен на Github. В случае дальнейших вопросов, не стесняйтесь комментировать!
В следующем эпизоде вы узнаете, как отображать ответ API на таблицу с помощью Material-UI.
https://saba-saif.medium.com/designing-in-react-app-with-material-ui-2663be0e43a6
