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

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

Базовый компонент

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

import {useEffect, useState} from"react"
exportfunctionData({ url }) {
const [isLoading, setIsLoading] = useState(true)
const [isError, setIsError] = useState(false)
const [data, setData] = useState()
 useEffect(() => {
 setIsError(false)
 setIsLoading(true)
 setData(undefined)
 fetch(url)
 .then(res => res.json())
 .then(setData)
 .catch(() => setIsError(true))
 .finally(() => setIsLoading(false))
 })
return isLoading? (
Loading...</h1>
 ): isError? (

Error</h1>
 ): (
{JSON.stringify(data, null, 2)}</pre>
 )
}

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

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

Реализация useHook()

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

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

// package.json
"dependencies": {
"react": "experimental",
"react-dom": "experimental"
}
...

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

import {use} from"react"

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

exportfunctionData({ url }) {
const data = use(fetch(url).then(res => res.json()))
return<pre>{JSON.stringify(data, null, 2)}pre>
}

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

Состояние загрузки (приостановка)

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

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

exportdefaultfunctionApp () {
const [url, setUrl] = useState(URL.USERS)
return (
 <>
Loading...</div>}>

 </Suspense>
 </>
 )
}

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

Обработка ошибок с помощью границы ошибки

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

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

import React from"react"
classErrorBoundaryextendsReact.Component{
 state = { hasError: false, error: null }
static getDerivedStateFromError(error) {
return {
 hasError: true,
 error
 }
 }
 render() {
if (this.state.hasError) {
returnthis.props.fallback
 }
returnthis.props.children
 }
}
exportdefault ErrorBoundary;

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

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

exportdefaultfunctionApp () {
const [url, setUrl] = useState(URL.USERS)
return (
 <>
Oops! There's an error.

exportfunctionData({ url, shouldFetch }) {
let data = "Default data"
if (shouldFetch) {
const data = use(fetch(url).then(res => res.json()))
 }
return<pre>{JSON.stringify(data, null, 2)}pre>
}

exportfunctionData({ url, shouldFetch }) {
let data = "Default data"
if (shouldFetch) {
const data = use(Context)
 }
return<pre>{JSON.stringify(data, null, 2)}pre>
}