De React-apps, du udvikler, vil ofte hente data fra en ekstern API, og React-teamet har sørget for at imødekomme dette behov. Det brug() hook forenkler processen med datahentning.

Ved at bruge denne krog reducerer du mængden af ​​kedelkode, du skal bruge for at definere løfter og opdatere applikationstilstanden. Lær alt om React's brug() krog og hvordan du bruger den i dine React-projekter.

Den grundlæggende komponent

Overvej for eksempel 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 gengiver denne komponent, er den bruger API'et ved hjælp af fetch(). Det gemmer derefter enten dataene til komponentens tilstand, hvis anmodningen lykkedes, eller indstiller erFejl variabel til sand, hvis den ikke var.

Afhængigt af tilstanden gengiver den derefter enten data fra API'en eller en fejlmeddelelse. Mens API-anmodningen afventer, viser den teksten "Indlæser..." på siden.

UseHook()-implementeringen

Ovenstående komponent er en smule besværlig, da den er fuld af boilerplate-kode. For at løse dette problem skal du medbringe brug() hook og refaktorér din kode.

Med use() hook kan du reducere ovenstående komponent til kun to linjer kode. Men før du gør det, skal du bemærke, at denne krog er ret ny, så du kan kun bruge den i den eksperimentelle version af React. Så sørg for, at du bruger denne version:

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

Du er nu klar til at bruge krogen, start med at udskifte useState og useEffect importerer med bare brug:

import {use} from"react"

Inde i Data komponent, er det eneste du vil beholde henteanmodningen. Men du bliver nødt til at pakke henteanmodningen ind i din brug() krog; det returnerer enten JSON-data eller en fejl. Indstil derefter svaret til en variabel kaldet 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, reducerer ovenstående kode komponenten til kun to linjer kode. Det viser, hvor nyttig use()-krogen kan være i scenarier som dette.

Indlæsningstilstand (suspense)

En vigtig del af brug() hook håndterer indlæsnings- og fejltilstande. Du kan gøre dette inde i den overordnede komponent af Data.

For at implementere indlæsningsfunktionen skal du pakke ind Data komponent med Spænding. Denne komponent tager en reserve-rekvisit, som den vil gengive, når som helst du er i indlæsningstilstand:

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

 </Suspense>
 </>
 )
}

Det brug() krog i Data-komponenten udløser denne suspense til at indlæse. Selvom løftet endnu ikke er løst, er det App komponent vil gengive fallback-tilstanden. Derefter, når Data komponent modtager svardataene, gengiver den indholdet i stedet for indlæsningstilstanden.

Fejlhåndtering med fejlgrænse

Når det kommer til at fange fejl, skal du vide det hvordan Error Boundary fungerer at bruge det. Typisk vil du bruge det, når du arbejder med Suspense.

Et eksempel på en fejlgrænse 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-eksempel har et tilstandsobjekt, der sporer fejltilstanden, og hvad fejlen er. Dernæst får den den afledte tilstand fra den fejl. Det render() funktionen viser fallback-elementet, hvis der er en fejl. Ellers gengiver den, hvad der er inde i .

Ovenstående komponent fungerer stort set det samme som Suspense. Så i app-komponenten kan du pakke alt inde i Error Boundary komponent som sådan:

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