React-appene du utvikler vil ofte hente data fra en ekstern API, og React-teamet har sørget for å imøtekomme dette behovet. De bruk() hook forenkler prosessen med datahenting.

Ved å bruke denne kroken, vil du redusere mengden av kjelekode du trenger for å definere løfter og oppdatere applikasjonstilstand. Lær alt om React's bruk() krok og hvordan du bruker den i dine React-prosjekter.

Den grunnleggende komponenten

Tenk for eksempel på følgende 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>
 )
}

Når React gjengir denne komponenten, vil den bruker API ved hjelp av fetch(). Den lagrer deretter enten dataene til komponentens tilstand hvis forespørselen var vellykket, eller angir erFeil variabel til sann hvis den ikke var det.

Avhengig av tilstanden gjengir den enten data fra API eller en feilmelding. Mens API-forespørselen venter, viser den en "Laster ..."-tekst på siden.

UseHook()-implementeringen

Komponenten ovenfor er litt tungvint siden den er full av standardkode. For å løse dette problemet, ta med bruk() hekte og refaktorer koden din.

Med use()-kroken kan du redusere komponenten ovenfor til bare to linjer med kode. Men før du gjør det, vær oppmerksom på at denne kroken er ganske ny, så du kan bare bruke den i den eksperimentelle versjonen av React. Så sørg for at du bruker den versjonen:

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

Du er nå klar til å bruke kroken, og begynner med å erstatte useState og useEffect importerer med bare bruk:

import {use} from"react"

Inne i Data komponent, er det eneste du skal beholde henteforespørselen. Men du må legge inn henteforespørselen i din bruk() krok; den returnerer enten JSON-data eller en feil. Sett deretter responsen til en variabel kalt data:

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

Det er alt! Som du kan se, reduserer koden ovenfor komponenten til bare to linjer med kode. Det viser hvor nyttig use()-kroken kan være i scenarier som dette.

Lastetilstand (suspense)

En viktig del av bruk() kroken håndterer lasting og feiltilstander. Du kan gjøre dette i den overordnede komponenten til Data.

For å implementere lastefunksjonaliteten, pakk inn Data komponent med Spenning. Denne komponenten tar en reserverekvisitt som den vil gjengi når som helst du er i innlastingstilstanden:

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

 </Suspense>
 </>
 )
}

De bruk() krok i Data-komponenten utløser denne spenningen til å laste. Mens løftet ennå ikke er løst, er det App komponent vil gjengi reservetilstanden. Så, når Data komponenten mottar responsdataene, gjengir den innholdet i stedet for innlastingstilstanden.

Feilhåndtering med feilgrense

Når det gjelder å fange feil, må du vite det hvordan Error Boundary fungerer å bruke den. Vanligvis vil du bruke den når du jobber med Suspense.

Et eksempel på en feilgrense er i følgende kode:

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;

Dette Error Boundary-eksemplet har et tilstandsobjekt som sporer feiltilstanden og hva feilen er. Deretter får den den avledede tilstanden fra den feilen. De gjengi() funksjonen viser reserveelementet hvis det er en feil. Ellers gjengir den det som er inne i .

Komponenten ovenfor fungerer stort sett på samme måte som Suspense. Så i app-komponenten kan du pakke alt inn i Feilgrense komponent slik:

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