Aplikace React, které vyvíjíte, často získávají data z externího API a tým React se postaral o to, aby tuto potřebu uspokojil. The použití() hook zjednodušuje proces načítání dat.

Pomocí tohoto háku snížíte množství standardního kódu, který potřebujete k definování slibů a aktualizaci stavu aplikace. Zjistěte vše o React's použití() háček a jak jej používat ve vašich projektech React.

Základní komponenta

Zvažte například následující 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>
 )
}

Jakmile React vykreslí tuto komponentu, je to spotřebovává API pomocí fetch(). Poté buď uloží data do stavu komponenty, pokud byl požadavek úspěšný, nebo nastaví isError proměnná na true, pokud tomu tak nebylo.

V závislosti na stavu pak vykreslí buď data z API, nebo chybovou zprávu. Zatímco požadavek API čeká na vyřízení, zobrazuje se na stránce text „Načítání...“.

Implementace useHook().

Výše uvedená komponenta je trochu těžkopádná, protože je plná standardního kódu. Chcete-li tento problém vyřešit, přiveďte použití() zahákněte a refaktorujte svůj kód.

Pomocí háčku use() můžete výše uvedenou komponentu zredukovat na pouhé dva řádky kódu. Než to však uděláte, poznamenejte si, že tento háček je poměrně nový, takže jej můžete použít pouze v experimentální verzi Reactu. Ujistěte se tedy, že používáte tuto verzi:

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

Nyní jste připraveni k použití háku, počínaje jeho výměnou useState a useEffect dovoz s právě použití:

import {use} from"react"

Uvnitř Data jediná věc, kterou si ponecháte, je požadavek na načtení. Požadavek na načtení ale budete muset zabalit do svého použití() háček; vrací buď data JSON, nebo chybu. Poté nastavte odezvu na proměnnou nazvanou data:

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

To je vše! Jak vidíte, výše uvedený kód redukuje komponentu na pouhé dva řádky kódu. To ukazuje, jak užitečný může být hák use() ve scénářích, jako je tento.

Stav načítání (napětí)

Důležitou součástí použití() hák zpracovává stavy načítání a chyb. Můžete to udělat uvnitř nadřazené komponenty Data.

Chcete-li implementovat funkci načítání, zabalte soubor Data komponenta s Napětí. Tato komponenta používá záložní podpěru, která se vykreslí, kdykoli budete ve stavu načítání:

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

 </Suspense>
 </>
 )
}

The použití() háček v komponentě Data spustí načítání tohoto napětí. Zatímco slib je ještě vyřešen, Aplikace komponenta vykreslí nouzový stav. Poté, když Data komponenta přijme data odezvy, vykreslí obsah místo stavu načítání.

Zpracování chyb s hranicí chyb

Pokud jde o chytání chyb, musíte to vědět jak funguje hranice chyb používat to. Obvykle jej použijete, když pracujete s Napětím.

Příklad hranice chyby je v následujícím kódu:

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 příklad Error Boundary má objekt stavu, který sleduje chybový stav a co je chyba. Dále získá odvozený stav z této chyby. The poskytnout() funkce zobrazí nouzový prvek, pokud dojde k chybě. Jinak vykreslí vše, co je uvnitř .

Výše uvedená komponenta funguje v podstatě stejně jako Suspense. Takže v komponentě App můžete vše zabalit dovnitř 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>
}