Teie arendatavad Reacti rakendused toovad sageli andmeid väliselt API-lt ja Reacti meeskond on selle vajaduse kindlasti rahuldanud. The kasuta () konks lihtsustab andmete toomise protsessi.

Seda konksu kasutades vähendate lubaduste määratlemiseks ja rakenduse oleku värskendamiseks vajalikku standardkoodi hulka. Lugege kõike Reacti kohta kasuta () konks ja kuidas seda oma Reacti projektides kasutada.

Põhikomponent

Mõelge näiteks järgmistele komponentidele:

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

Kui React selle komponendi renderdab, siis see kasutab API-t kasutades fetch(). Seejärel salvestab see andmed komponendi olekusse, kui päring oli edukas, või määrab isError muutuja tõeseks, kui see ei olnud.

Olenevalt olekust renderdab see seejärel API andmeid või veateate. Kui API taotlus on ootel, kuvatakse lehel tekst "Laaditakse...".

UseHook() teostus

Ülaltoodud komponent on pisut tülikas, kuna see on täis standardkoodi. Selle probleemi lahendamiseks tooge sisse kasuta () haak ja refaktoreeri oma kood.

Konksu use() abil saate ülaltoodud komponendi taandada vaid kahele koodireale. Kuid enne seda pange tähele, et see konks on üsna uus, nii et saate seda kasutada ainult Reacti eksperimentaalses versioonis. Seega veenduge, et kasutate seda versiooni:

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

Nüüd olete konksu kasutamiseks valmis, alustades konksu asendamisest useState ja useEffect impordib just kasutada:

import {use} from"react"

Sees Andmed Ainus asi, mida te alles jätate, on toomistaotlus. Kuid peate toomistaotluse oma sisse pakkima kasuta () konks; see tagastab kas JSON-andmed või veateate. Seejärel määrake vastuseks kutsutud muutuja andmeid:

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

See on kõik! Nagu näete, vähendab ülaltoodud kood komponendi vaid kahele koodireale. See näitab, kui kasulik võib konks use() sellistes stsenaariumides olla.

Laadimisolek (vaheaeg)

Oluline osa kasuta () konks tegeleb laadimis- ja veaolekutega. Seda saate teha emakomponendi sees Andmed.

Laadimisfunktsiooni rakendamiseks mähkige Andmed komponent koos Põnevus. See komponent kasutab varurekvisiidi, mille see renderdab igal ajal, kui olete laadimisolekus:

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

 </Suspense>
 </>
 )
}

The kasuta () konks andmekomponendis käivitab selle pinge laadimise. Kuigi lubadus on veel lahendamata, Rakendus komponent renderdab varuoleku. Siis, kui Andmed komponent saab vastuseandmed, renderdab laadimisoleku asemel sisu.

Vigade käsitlemine veapiiriga

Kui tegemist on vigade püüdmisega, peate teadma kuidas veapiir töötab seda kasutada. Tavaliselt kasutate seda Suspense'iga töötades.

Veapiiri näide on järgmises koodis:

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;

Sellel veapiiri näitel on olekuobjekt, mis jälgib tõrke olekut ja vea olekut. Järgmisena saab see veast tuletatud oleku. The render () funktsioon kuvab vea korral varuelemendi. Vastasel juhul renderdab see kõik, mis on sees .

Ülaltoodud komponent töötab peaaegu samamoodi nagu Suspense. Seega saate rakenduse komponendis kõik selle sisse pakkida ErrorBoundary komponent nagu näiteks:

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