Aplikácie React, ktoré vyvíjate, často získavajú údaje z externého rozhrania API a tím React sa postaral o to, aby túto potrebu uspokojil. The použiť() hook zjednodušuje proces získavania údajov.

Pomocou tohto háku znížite množstvo štandardného kódu, ktorý potrebujete na definovanie sľubov a aktualizáciu stavu aplikácie. Zistite všetko o React's použiť() háčik a ako ho použiť vo svojich projektoch React.

Základný komponent

Zvážte napríklad nasledujúci 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>
 )
}

Akonáhle React vykreslí tento komponent, to spotrebuje API pomocou fetch(). Potom buď uloží údaje do stavu komponentu, ak bola požiadavka úspešná, alebo nastaví isError premenná na true, ak to tak nebolo.

V závislosti od stavu potom vykreslí buď údaje z API, alebo chybové hlásenie. Kým žiadosť API čaká, na stránke sa zobrazuje text „Načítava sa...“.

Implementácia useHook().

Vyššie uvedený komponent je trochu ťažkopádny, pretože je plný štandardného kódu. Ak chcete tento problém vyriešiť, zaveďte použiť() zaveste a zrefaktorujte svoj kód.

Pomocou háku use() môžete zredukovať vyššie uvedený komponent len ​​na dva riadky kódu. Predtým si však uvedomte, že tento háčik je pomerne nový, takže ho môžete použiť iba v experimentálnej verzii React. Takže sa uistite, že používate túto verziu:

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

Teraz ste pripravení použiť hák, počnúc výmenou háčika useState a useEffect dovoz s práve použitie:

import {use} from"react"

Vnútri Údaje komponent, jediná vec, ktorú si ponecháte, je požiadavka na načítanie. Žiadosť o načítanie však budete musieť zabaliť do svojho použiť() hák; vráti buď údaje JSON, alebo chybu. Potom nastavte odpoveď na premennú tzv údajov:

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

To je všetko! Ako vidíte, vyššie uvedený kód redukuje komponent len ​​na dva riadky kódu. To ukazuje, aký užitočný môže byť hák use() v scenároch, ako je tento.

Stav načítania (napätie)

Dôležitou súčasťou použiť() hák spracováva stavy načítania a chyby. Môžete to urobiť v nadradenom komponente Údaje.

Ak chcete implementovať funkciu načítania, zabaľte súbor Údaje komponent s Napätie. Tento komponent má záložnú podporu, ktorá sa vykreslí vždy, keď sa nachádzate v stave načítania:

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

 </Suspense>
 </>
 )
}

The použiť() háčik v komponente Údaje spúšťa načítanie tohto napätia. Zatiaľ čo sľub je ešte nevyriešený, App komponent vykreslí záložný stav. Potom, keď Údaje komponent prijme údaje odpovede, vykreslí obsah namiesto stavu načítania.

Spracovanie chýb s hranicou chýb

Pokiaľ ide o chytanie chýb, musíte to vedieť ako funguje hranica chýb používať ho. Zvyčajne ho použijete pri práci s Napätím.

Príklad hranice chyby je v nasledujúcom kóde:

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;

Tento príklad hranice chyby má objekt stavu, ktorý sleduje chybový stav a o akú chybu ide. Ďalej získa odvodený stav z tejto chyby. The render() funkcia zobrazí záložný prvok, ak dôjde k chybe. V opačnom prípade vykreslí čokoľvek, čo je vo vnútri .

Vyššie uvedený komponent funguje takmer rovnako ako Suspense. Takže v komponente App môžete všetko zabaliť do ErrorBoundary komponent takto:

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