De React-apps die u ontwikkelt, halen vaak gegevens op van een externe API, en het React-team heeft ervoor gezorgd dat aan deze behoefte wordt voldaan. De gebruik() hook vereenvoudigt het proces van het ophalen van gegevens.

Door deze hook te gebruiken, verminder je de hoeveelheid standaardcode die je nodig hebt om beloftes te definiëren en de applicatiestatus bij te werken. Leer alles over React gebruik() hook en hoe u deze kunt gebruiken in uw React-projecten.

Het basiscomponent

Denk bijvoorbeeld aan het volgende onderdeel:

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

Zodra React dit onderdeel heeft weergegeven, wordt het verbruikt de API met behulp van fetch(). Vervolgens worden de gegevens opgeslagen in de status van de component als het verzoek succesvol was, of wordt de isFout variabele naar waar als dit niet het geval was.

Afhankelijk van de status geeft het vervolgens gegevens uit de API of een foutmelding weer. Terwijl het API-verzoek in behandeling is, wordt de tekst 'Bezig met laden...' op de pagina weergegeven.

De useHook()-implementatie

Het bovenstaande onderdeel is een beetje omslachtig omdat het vol standaardcode zit. Om dit probleem op te lossen, brengt u de gebruik() hook en refactor uw code.

Met de hook use() kunt u het bovenstaande onderdeel terugbrengen tot slechts twee regels code. Maar voordat je dat doet, moet je er rekening mee houden dat deze hook vrij nieuw is, dus je kunt hem alleen gebruiken in de experimentele versie van React. Zorg er dus voor dat u die versie gebruikt:

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

U bent nu klaar om de haak te gebruiken, te beginnen met het vervangen van de haak gebruikState En gebruikEffect importeert met slechts gebruik:

import {use} from"react"

Binnen in de Gegevens component, het enige dat u gaat behouden is het ophaalverzoek. Maar u moet het ophaalverzoek in uw gebruik() haak; het retourneert JSON-gegevens of een fout. Stel vervolgens het antwoord in op een variabele genaamd gegevens:

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

Dat is alles! Zoals u kunt zien, reduceert de bovenstaande code de component tot slechts twee regels code. Dat laat zien hoe nuttig de hook use() kan zijn in scenario's als deze.

Laadstatus (onderbreking)

Een belangrijk onderdeel van de gebruik() hook verwerkt de laad- en foutstatussen. U kunt dit doen in de bovenliggende component van Gegevens.

Om de laadfunctionaliteit te implementeren, wrap the Gegevens bestanddeel mee Spanning. Dit onderdeel gebruikt een fallback-prop die wordt weergegeven wanneer u zich in de laadstatus bevindt:

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

 </Suspense>
 </>
 )
}

De gebruik() hook in de Data-component zorgt ervoor dat deze spanning wordt geladen. Hoewel de belofte nog moet worden opgelost, is de App component zal de fallback-status weergeven. Toen, toen de Gegevens component de antwoordgegevens ontvangt, geeft het de inhoud weer in plaats van de laadstatus.

Foutafhandeling met foutgrens

Als het gaat om het opsporen van fouten, moet u dit weten hoe foutgrens werkt om het te gebruiken. Meestal gebruikt u het als u met Suspense werkt.

Een voorbeeld van een foutgrens staat in de volgende code:

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;

Dit voorbeeld van Error Boundary heeft een statusobject dat de foutstatus bijhoudt en wat de fout is. Vervolgens krijgt het de afgeleide status van die fout. De veroorzaken() functie geeft het fallback-element weer als er een fout is. Anders wordt alles weergegeven wat zich in het .

Het bovenstaande onderdeel werkt vrijwel hetzelfde als Suspense. In de App-component kunt u dus alles in de Foutgrens onderdeel als volgt:

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