Kehittämäsi React-sovellukset hakevat usein tietoja ulkoisesta API: sta, ja React-tiimi on huolehtinut tästä tarpeesta. The käyttää() koukku yksinkertaistaa tiedonhakuprosessia.

Tämän koukun avulla vähennät lupausten määrittämiseen ja sovelluksen tilan päivittämiseen tarvittavan vakiokoodin määrää. Opi kaikki Reactista käyttää() koukku ja kuinka käyttää sitä React-projekteissasi.

Peruskomponentti

Harkitse esimerkiksi seuraavaa komponenttia:

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

Kun React tekee tämän komponentin, se kuluttaa API: ta käyttämällä fetch(). Sitten se joko tallentaa tiedot komponentin tilaan, jos pyyntö onnistui, tai asettaa on Error muuttuja tosi, jos se ei ollut.

Tilasta riippuen se näyttää sitten joko API: n tiedot tai virheilmoituksen. Kun API-pyyntö on vireillä, sivulla näkyy "Ladataan..." -teksti.

UseHook() -toteutus

Yllä oleva komponentti on hieman hankala, koska se on täynnä vakiokoodia. Voit ratkaista tämän ongelman tuomalla sisään käyttää() kiinnitä koodisi uudelleen.

Use()-koukun avulla voit pienentää yllä olevan komponentin vain kahdelle koodiriville. Mutta ennen kuin teet sen, huomaa, että tämä koukku on melko uusi, joten voit käyttää sitä vain Reactin kokeellisessa versiossa. Varmista siis, että käytät tätä versiota:

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

Olet nyt valmis käyttämään koukkua aloittamalla vaihtamalla koukun useState ja useEffect tuonti vain käyttää:

import {use} from"react"

Sisällä Data komponentti, ainoa asia, jonka aiot säilyttää, on noutopyyntö. Mutta sinun on käärittävä noutopyyntö sisään käyttää() koukku; se palauttaa joko JSON-tiedot tai virheen. Aseta sitten vastaus muuttujaan nimeltä tiedot:

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

Siinä kaikki! Kuten näet, yllä oleva koodi vähentää komponentin vain kahdeksi koodiriville. Tämä osoittaa, kuinka hyödyllinen use()-koukku voi olla tällaisissa skenaarioissa.

Lataustila (jännitys)

Tärkeä osa käyttää() koukku käsittelee lataus- ja virhetiloja. Voit tehdä tämän emokomponentin sisällä Data.

Ota lataustoiminto käyttöön käärimällä Data komponentin kanssa Jännitystä. Tämä komponentti ottaa varapuhelimen, jonka se renderöi aina, kun olet lataustilassa:

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

 </Suspense>
 </>
 )
}

The käyttää() koukku Data-komponentissa laukaisee jännityksen latautumiseen. Vaikka lupaus on vielä ratkaisematta, Sovellus komponentti tekee varatilan. Sitten, kun Data komponentti vastaanottaa vastaustiedot, se renderöi sisällön lataustilan sijaan.

Virheiden käsittely virherajoilla

Kun on kyse virheiden havaitsemisesta, sinun on tiedettävä miten Error Boundary toimii käyttää sitä. Yleensä käytät sitä, kun työskentelet Suspensen kanssa.

Esimerkki virherajasta on seuraavassa koodissa:

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;

Tässä Error Boundary -esimerkissä on tilaobjekti, joka seuraa virheen tilaa ja virhettä. Seuraavaksi se saa virheestä johdetun tilan. The render() toiminto näyttää varaelementin, jos siinä on virhe. Muuten se näyttää mitä tahansa sisällä on .

Yllä oleva komponentti toimii melko samalla tavalla kuin Suspense. Joten App-komponentissa voit kääriä kaiken sisälle ErrorBoundary komponentti näin:

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