Tworzone przez Ciebie aplikacje React często pobierają dane z zewnętrznego API, a zespół React zadbał o zaspokojenie tej potrzeby. The używać() hook upraszcza proces pobierania danych.

Używając tego haka, zmniejszysz ilość standardowego kodu potrzebnego do zdefiniowania obietnic i aktualizacji stanu aplikacji. Dowiedz się wszystkiego o React używać() hook i jak go używać w projektach React.

Podstawowy komponent

Rozważmy na przykład następujący komponent:

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>
 )
}

Kiedy React wyrenderuje ten komponent, to zużywa interfejs API za pomocą fetch(). Następnie albo zapisuje dane w stanie komponentu, jeśli żądanie zakończyło się pomyślnie, albo ustawia jestBłąd zmienną na true, jeśli tak nie było.

W zależności od stanu renderuje następnie dane z interfejsu API lub komunikat o błędzie. Gdy żądanie API jest oczekujące, na stronie wyświetla się tekst „Ładowanie…”.

Implementacja useHook().

Powyższy komponent jest nieco uciążliwy, ponieważ zawiera mnóstwo szablonowego kodu. Aby rozwiązać ten problem, przynieś plik używać() zaczep i zrefaktoryzuj swój kod.

Za pomocą haka use() możesz zredukować powyższy komponent do zaledwie dwóch linii kodu. Ale zanim to zrobisz, zauważ, że ten hak jest raczej nowy, więc możesz go używać tylko w eksperymentalnej wersji React. Upewnij się więc, że używasz tej wersji:

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

Możesz teraz użyć haka, zaczynając od wymiany stan użycia I użyjEfektu import z zaledwie używać:

import {use} from"react"

W środku Dane komponent, jedyną rzeczą, którą zamierzasz zachować, jest żądanie pobrania. Ale będziesz musiał zawinąć żądanie pobrania w pliku używać() hak; zwraca dane JSON lub błąd. Następnie ustaw odpowiedź na zmienną o nazwie dane:

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

To wszystko! Jak widać, powyższy kod redukuje komponent do zaledwie dwóch linii kodu. To pokazuje, jak przydatny może być hak use() w takich scenariuszach.

Stan ładowania (zawieszenie)

Ważna część używać() hook obsługuje stany ładowania i błędów. Możesz to zrobić wewnątrz komponentu nadrzędnego Dane.

Aby zaimplementować funkcję ładowania, zawiń plik Dane składnik z Niepewność. Ten komponent pobiera rekwizyt zastępczy, który będzie renderowany za każdym razem, gdy będziesz w stanie ładowania:

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

 </Suspense>
 </>
 )
}

The używać() zaczepienie komponentu Dane powoduje załadowanie tego napięcia. Chociaż obietnica nie została jeszcze rozwiązana, Aplikacja komponent wyrenderuje stan awaryjny. Następnie, gdy Dane komponent otrzymuje dane odpowiedzi, renderuje treść zamiast stanu ładowania.

Obsługa błędów z granicą błędu

Jeśli chodzi o wychwytywanie błędów, musisz to wiedzieć jak działa granica błędu go używać. Zwykle będziesz go używać podczas pracy z Suspensem.

Przykład granicy błędu znajduje się w następującym kodzie:

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;

Ten przykład granicy błędu zawiera obiekt stanu, który śledzi stan błędu i jego treść. Następnie pobiera stan pochodny na podstawie tego błędu. The renderowanie() funkcja wyświetla element zastępczy, jeśli wystąpi błąd. W przeciwnym razie renderuje wszystko, co jest w środku .

Powyższy komponent działa prawie tak samo jak Suspense. Zatem w komponencie aplikacji możesz zawinąć wszystko w plik Granica błędu taki komponent:

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>
}