Хук use() в React: как его применять и зачем

Этот новый хук может помочь упростить большую часть шаблонного кода.

Приложения React, которые вы разрабатываете, часто получают данные из внешнего API, и команда React позаботилась об удовлетворении этой потребности. использовать()перехватчик упрощает процесс получения данных.

Используя этот хук, вы уменьшите количество шаблонного кода, необходимого для определения промисов и обновления состояния приложения. Узнайте все о Reactиспользовать()крючок и как его использовать в ваших проектах React.

Рассмотрим, например, следующий компонент:

Как только React визуализирует этот компонент, он использует API с помощью fetch(). Затем он либо сохраняет данные в состояние компонента, если запрос был успешным, либо устанавливаетisErrorпеременную в true, если это не так.

В зависимости от состояния он затем отображает либо данные из API, либо сообщение об ошибке. Пока запрос API находится на рассмотрении, на странице отображается текст «Загрузка...».

Вышеупомянутый компонент немного громоздкий, поскольку он полон шаблонного кода. Чтобы решить эту проблему, внеситеиспользовать()перехватите и выполните рефакторинг вашего кода.

С помощью ловушки use() вы можете сократить вышеуказанный компонент до двух строк кода. Но прежде чем сделать это, обратите внимание, что этот крючок довольно новый, поэтому вы можете использовать его только в экспериментальной версии React. Поэтому убедитесь, что вы используете эту версию:

Теперь вы готовы использовать крючок, начиная с заменыuseStateииспользованиеЭффектимпорт всего заиспользовать:

ВнутриДанные компонент, единственное, что вы сохраните, — это запрос на выборку. Но вам нужно будет обернуть запрос на выборку внутри вашегоиспользовать() крюк; он возвращает либо данные JSON, либо ошибку. Затем установите ответ в переменную с именемданные:

Вот и все! Как видите, приведенный выше код сокращает компонент до двух строк кода. Это демонстрирует, насколько полезным может быть хук use() в подобных сценариях.

Важная частьиспользовать() Хук обрабатывает состояния загрузки и ошибки. Вы можете сделать это внутри родительского компонентаДанные.

Чтобы реализовать функцию загрузки, обернитеДанныекомпонент сСаспенс . Этот компонент принимает резервную опору, которую он будет отображать каждый раз, когда вы находитесь в состоянии загрузки:

использовать() перехват в компоненте данных запускает эту ожидание для загрузки. Хотя обещание еще не выполнено,Приложение компонент отобразит резервное состояние. Затем, когдаДанныекомпонент получает данные ответа, он отображает контент вместо состояния загрузки.

Когда дело доходит до обнаружения ошибок, вам нужно знать, как работает Error Boundary, чтобы использовать ее. Обычно вы будете использовать его при работе с Suspense.

Пример границы ошибки приведен в следующем коде:

В этом примере границы ошибки есть объект состояния, который отслеживает состояние ошибки и ее характер. Затем он получает производное состояние этой ошибки. оказывать() функция отображает резервный элемент в случае ошибки. В противном случае он отображает все, что находится внутри.

Вышеупомянутый компонент работает почти так же, как Suspense. Итак, в компоненте App вы можете обернуть всё внутриОшибкаГраницакомпонент такой:

Если какой-либо из вложенных кодов выдает ошибку, ваша граница ошибок перехватит ее черезgetDerivedStateFromError()и обновите состояние, что, в свою очередь, отобразит резервный текст: «К сожалению! Произошла ошибка».

Таким образом, ловушка use() может помочь уменьшить объем шаблонного кода и облегчить загрузку и устранение ошибок. Но у ловушки use() есть еще одно очень удобное применение.

Предположим, вы отправляетеследует получитьлогическое значение как опора дляДанныекомпонент, и вы хотите выполнить запрос на выборку только в том случае, еслиследует получить/strong>