Jūsu izstrādātās React lietotnes bieži iegūs datus no ārējas API, un React komanda ir nodrošinājusi šīs vajadzības. The izmantot () āķis vienkāršo datu iegūšanas procesu.

Izmantojot šo āķi, jūs samazināsit standarta koda daudzumu, kas nepieciešams, lai definētu solījumus un atjauninātu lietojumprogrammas stāvokli. Uzziniet visu par React izmantot () āķis un kā to izmantot savos React projektos.

Pamatkomponents

Apsveriet, piemēram, šādu komponentu:

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

Kad React atveido šo komponentu, tas patērē API, izmantojot fetch(). Pēc tam tas vai nu saglabā datus komponenta stāvoklī, ja pieprasījums bija veiksmīgs, vai iestata isError mainīgais uz patiesu, ja tā nebija.

Atkarībā no stāvokļa tas atveido datus no API vai kļūdas ziņojumu. Kamēr API pieprasījums tiek gaidīts, lapā tiek rādīts teksts “Notiek ielāde...”.

UseHook() ieviešana

Iepriekš minētais komponents ir nedaudz apgrūtinošs, jo tas ir pilns ar standarta kodu. Lai atrisinātu šo problēmu, ienesiet izmantot () piesaistiet un pārveidojiet savu kodu.

Izmantojot use() hook, varat samazināt iepriekš minēto komponentu tikai līdz divām koda rindām. Bet pirms to darāt, ņemiet vērā, ka šis āķis ir diezgan jauns, tāpēc varat to izmantot tikai eksperimentālajā React versijā. Tāpēc pārliecinieties, ka izmantojat šo versiju:

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

Tagad esat gatavs izmantot āķi, sākot ar āķa nomaiņu useState un useEffect imports ar tikko izmantot:

import {use} from"react"

Iekšpusē Dati komponents, vienīgais, ko jūs paturēsit, ir ieneses pieprasījums. Bet jums būs jāiekļauj ielādes pieprasījums izmantot () āķis; tas atgriež vai nu JSON datus, vai kļūdu. Pēc tam iestatiet atbildi uz izsaukto mainīgo datus:

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

Tas ir viss! Kā redzat, iepriekš minētais kods samazina komponentu tikai līdz divām koda rindām. Tas parāda, cik noderīgs var būt use() āķis šādos scenārijos.

Ielādes stāvoklis (saspense)

Svarīga daļa no izmantot () āķis apstrādā iekraušanas un kļūdu stāvokļus. To var izdarīt vecāku komponentā Dati.

Lai ieviestu ielādes funkcionalitāti, aptiniet Dati komponents ar Neziņa. Šim komponentam tiek izmantots rezerves atbalsts, ko tas atveidos jebkurā laikā, kad atrodaties ielādes stāvoklī:

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

 </Suspense>
 </>
 )
}

The izmantot () āķis Datu komponentā izraisa šīs spriedzes ielādi. Kamēr solījums vēl nav atrisināts, App komponents atveidos atkāpšanās stāvokli. Tad, kad Dati komponents saņem atbildes datus, tas atveido saturu, nevis ielādes stāvokli.

Kļūdu apstrāde ar kļūdu robežu

Kad runa ir par kļūdu uztveršanu, jums tas jāzina kā darbojas kļūdu robeža lai to izmantotu. Parasti jūs to izmantosit, strādājot ar Suspense.

Kļūdu robežas piemērs ir šādā kodā:

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;

Šajā kļūdu robežas piemērā ir stāvokļa objekts, kas izseko kļūdas stāvokli un kļūdu. Pēc tam tas iegūst no šīs kļūdas atvasināto stāvokli. The renderēt () funkcija parāda atkāpšanās elementu, ja rodas kļūda. Pretējā gadījumā tas atveido visu, kas atrodas iekšpusē .

Iepriekš minētais komponents darbojas gandrīz tāpat kā Suspense. Tātad lietotnes komponentā varat ietīt visu ErrorBoundary komponents, piemēram:

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