Jūsų kuriamos „React“ programos dažnai gaus duomenis iš išorinės API, o „React“ komanda pasirūpino, kad šis poreikis būtų patenkintas. The naudoti () hook supaprastina duomenų gavimo procesą.

Naudodami šį kabliuką sumažinsite pagrindinio kodo kiekį, kurio reikia norint apibrėžti pažadus ir atnaujinti programos būseną. Sužinokite viską apie „React“. naudoti () kabliuką ir kaip jį panaudoti savo „React“ projektuose.

Pagrindinis komponentas

Apsvarstykite, pavyzdžiui, šį komponentą:

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

Kai „React“ pateiks šį komponentą, jis naudoja API naudodamas fetch(). Tada jis išsaugo duomenis į komponento būseną, jei užklausa buvo sėkminga, arba nustato isError kintamasis į teisingą, jei taip nebuvo.

Priklausomai nuo būsenos, jis pateikia duomenis iš API arba klaidos pranešimą. Kol API užklausa laukiama, puslapyje rodomas tekstas „Įkeliama...“.

UseHook() įgyvendinimas

Aukščiau pateiktas komponentas yra šiek tiek sudėtingas, nes jame pilna pagrindinio kodo. Norėdami išspręsti šią problemą, atsineškite naudoti () pakabinkite ir pakeiskite savo kodą.

Naudodami „use() hook“ aukščiau nurodytą komponentą galite sumažinti iki dviejų kodo eilučių. Tačiau prieš tai darydami atminkite, kad šis kabliukas yra gana naujas, todėl jį galite naudoti tik eksperimentinėje React versijoje. Taigi įsitikinkite, kad naudojate šią versiją:

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

Dabar esate pasirengę naudoti kabliuką, pakeisdami kabliuką useState ir naudojimoEfektas importuoja tik naudoti:

import {use} from"react"

Viduje Duomenys komponentas, vienintelis dalykas, kurį pasiliksite, yra gavimo užklausa. Tačiau gavimo užklausą turėsite įtraukti į savo vidų naudoti () kabliukas; grąžina JSON duomenis arba klaidą. Tada nustatykite atsakymą į kintamąjį, vadinamą duomenis:

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

Tai viskas! Kaip matote, aukščiau pateiktas kodas sumažina komponentą iki dviejų kodo eilučių. Tai parodo, koks naudingas gali būti „use() hook“ tokiais atvejais kaip šis.

Įkėlimo būsena (įtempta)

Svarbi dalis naudoti () kabliukas tvarko pakrovimo ir klaidų būsenas. Tai galite padaryti pagrindiniame komponente Duomenys.

Norėdami įdiegti įkėlimo funkciją, apvyniokite Duomenys komponentas su Įtampa. Šis komponentas naudoja atsarginį rekvizitą, kurį jis pateiks bet kuriuo metu, kai būsite įkeliami:

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

 </Suspense>
 </>
 )
}

The naudoti () Duomenų komponento kabliukas įkelia šią įtampą. Nors pažadas dar neišspręstas, Programėlė komponentas pateiks atsarginę būseną. Tada, kai Duomenys komponentas gauna atsakymo duomenis, jis pateikia turinį, o ne įkėlimo būseną.

Klaidų tvarkymas su klaidų riba

Kai kalbama apie klaidų gaudymą, turite žinoti kaip veikia klaidų riba juo naudotis. Paprastai jį naudosite dirbdami su „Suspense“.

Klaidos ribos pavyzdys yra šiame kode:

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;

Šiame klaidų ribos pavyzdyje yra būsenos objektas, kuris seka klaidos būseną ir tai, kas yra klaida. Tada ji gauna iš tos klaidos išvestinę būseną. The pateikti () funkcija rodo atsarginį elementą, jei yra klaida. Priešingu atveju jis atvaizduoja viską, kas yra viduje .

Aukščiau pateiktas komponentas veikia beveik taip pat, kaip „Suspense“. Taigi, programos komponente galite viską apvynioti viduje ErrorBoundary komponentas toks:

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