Az Ön által kifejlesztett React-alkalmazások gyakran külső API-ból kérnek le adatokat, és a React csapata gondoskodott ennek az igénynek a kielégítéséről. A használat() hook leegyszerűsíti az adatlekérési folyamatot.

Ezzel a horoggal csökkentheti az ígéretek meghatározásához és az alkalmazás állapotának frissítéséhez szükséges alapkód mennyiségét. Tudjon meg mindent a React-ról használat() horog, és hogyan használhatja azt a React projektekben.

Az alapkomponens

Vegyük például a következő összetevőt:

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

Miután a React megjeleníti ezt az összetevőt, az használja az API-t a fetch() segítségével. Ezután vagy elmenti az adatokat az összetevő állapotába, ha a kérés sikeres volt, vagy beállítja a isError változóból igaz, ha nem így van.

Az állapottól függően vagy az API-ból származó adatokat, vagy hibaüzenetet jelenít meg. Amíg az API-kérés függőben van, a "Betöltés..." szöveg jelenik meg az oldalon.

A useHook() megvalósítás

A fenti komponens egy kicsit nehézkes, mivel tele van alapkóddal. A probléma megoldásához hozza be a használat() hook and refaktorálja a kódját.

A use() hook segítségével a fenti komponens mindössze két sornyi kódra redukálható. Mielőtt azonban ezt megtenné, vegye figyelembe, hogy ez a horog meglehetősen új, így csak a React kísérleti verziójában használhatja. Tehát győződjön meg róla, hogy ezt a verziót használja:

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

Most már készen áll a horog használatára, először a horog cseréjével useState és useEffect import csak használat:

import {use} from"react"

Benne Adat komponens, az egyetlen dolog, amit meg fog tartani, az a lekérési kérés. De a lekérési kérelmet a saját belsejébe kell csomagolnia használat() horog; vagy JSON-adatokat, vagy hibát ad vissza. Ezután állítsa be a választ egy meghívott változóra adat:

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

Ez minden! Mint látható, a fenti kód csak két sornyi kódra redukálja az összetevőt. Ez azt mutatja, hogy a use() hook mennyire hasznos lehet az ehhez hasonló forgatókönyvekben.

Betöltési állapot (felfüggesztés)

Fontos része a használat() hook kezeli a terhelési és hibaállapotokat. Ezt megteheti a szülőkomponensen belül Adat.

A betöltési funkció megvalósításához csomagolja be a Adat összetevővel Suspense. Ez az összetevő tartalék támasztékot vesz fel, amelyet bármikor megjelenít, amikor betöltési állapotban van:

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

 </Suspense>
 </>
 )
}

A használat() az Adat komponensben lévő horog hatására ez a feszültség betöltődik. Míg az ígéret még megoldásra vár, a App összetevő a tartalék állapotot jeleníti meg. Aztán amikor a Adat komponens fogadja a válaszadatokat, a betöltési állapot helyett a tartalmat jeleníti meg.

Hibakezelés hibahatárral

Ha a hibák elkapásáról van szó, tudnia kell hogyan működik az Error Boundary használni. Általában akkor használja, amikor a Suspense-szal dolgozik.

Egy példa a hibahatárra a következő kódban:

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;

Ebben a hibahatár-példában van egy állapotobjektum, amely nyomon követi a hibaállapotot és a hibát. Ezután megkapja a hibából származtatott állapotot. A Vakol() függvény hiba esetén a tartalék elemet jeleníti meg. Ellenkező esetben azt jeleníti meg, ami benne van .

A fenti komponens nagyjából ugyanúgy működik, mint a Suspense. Tehát az App komponensben mindent becsomagolhat az alkalmazásba ErrorBoundary ilyen komponens:

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