Aplikacije React, ki jih razvijate, bodo pogosto pridobivale podatke iz zunanjega API-ja in ekipa React je poskrbela, da bo zadostila tej potrebi. The uporaba() hook poenostavlja postopek pridobivanja podatkov.

Z uporabo tega kljuka boste zmanjšali količino kode, ki jo potrebujete za definiranje obljub in posodobitev stanja aplikacije. Izvedite vse o React's uporaba() kavelj in kako ga uporabiti v svojih projektih React.

Osnovna komponenta

Upoštevajte na primer naslednjo komponento:

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

Ko React upodobi to komponento, jo porablja API z uporabo fetch(). Nato bodisi shrani podatke v stanje komponente, če je bila zahteva uspešna, ali pa nastavi isError spremenljivka na true, če ni bila.

Odvisno od stanja nato upodobi podatke iz API-ja ali sporočilo o napaki. Medtem ko je zahteva API na čakanju, na strani prikazuje besedilo »Nalaganje ...«.

Implementacija useHook().

Zgornja komponenta je nekoliko okorna, saj je polna standardne kode. Če želite rešiti to težavo, vnesite uporaba() zaskočite in refaktorirajte svojo kodo.

S kljuko use() lahko zmanjšate zgornjo komponento na samo dve vrstici kode. Toda preden to storite, upoštevajte, da je ta kavelj precej nov, zato ga lahko uporabljate samo v eksperimentalni različici Reacta. Zato se prepričajte, da uporabljate to različico:

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

Zdaj ste pripravljeni za uporabo kljuke, začenši z zamenjavo useState in useEffect uvozi s samo uporaba:

import {use} from"react"

Znotraj podatki edina stvar, ki jo boste obdržali, je zahteva za pridobivanje. Toda zahtevo za pridobivanje boste morali zaviti v svoj uporaba() kavelj; vrne podatke JSON ali napako. Nato nastavite odziv na klicano spremenljivko podatke:

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

To je vse! Kot lahko vidite, zgornja koda zmanjša komponento na samo dve vrstici kode. To dokazuje, kako uporaben je lahko kavelj use() v takšnih scenarijih.

Stanje nalaganja (napetost)

Pomemben del uporaba() hook obravnava stanja nalaganja in napak. To lahko storite znotraj nadrejene komponente podatki.

Za izvedbo funkcije nalaganja zavijte podatki komponenta z Napetost. Ta komponenta uporablja nadomestni element, ki ga bo upodobil kadar koli, ko ste v stanju nalaganja:

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

 </Suspense>
 </>
 )
}

The uporaba() kavelj v podatkovni komponenti sproži nalaganje te napetosti. Medtem ko obljuba še ni razrešena, je aplikacija komponenta bo upodobila nadomestno stanje. Potem, ko je podatki komponenta prejme odzivne podatke, upodobi vsebino namesto stanja nalaganja.

Obravnava napak z mejo napake

Ko gre za lovljenje napak, morate vedeti kako deluje Error Boundary da ga uporabim. Običajno ga boste uporabljali, ko delate s Suspenzom.

Primer meje napake je v naslednji kodi:

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;

Ta primer Error Boundary ima objekt stanja, ki sledi stanju napake in kaj je napaka. Nato dobi izpeljano stanje iz te napake. The render() funkcija prikaže nadomestni element, če pride do napake. V nasprotnem primeru upodablja vse, kar je znotraj .

Zgornja komponenta deluje skoraj enako kot Suspense. Tako lahko v komponenti aplikacije zavijete vse, kar je v ErrorBoundary komponenta takole:

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