Die von Ihnen entwickelten React-Apps rufen häufig Daten von einer externen API ab, und das React-Team hat dafür gesorgt, dass dieser Bedarf berücksichtigt wird. Der verwenden() Hook vereinfacht den Prozess des Datenabrufs.

Mit diesem Hook reduzieren Sie die Menge an Boilerplate-Code, die Sie zum Definieren von Versprechen und zum Aktualisieren des Anwendungsstatus benötigen. Erfahren Sie alles über React's verwenden() Hook und wie Sie ihn in Ihren React-Projekten verwenden.

Die Grundkomponente

Betrachten Sie zum Beispiel die folgende Komponente:

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

instagram viewer
return isLoading? (
Loading...</h1>
 ): isError? (

Error</h1>
 ): (
{JSON.stringify(data, null, 2)}</pre>
 )
}

Sobald React diese Komponente rendert, wird sie verbraucht die API mit fetch(). Anschließend werden die Daten entweder im Status der Komponente gespeichert, wenn die Anforderung erfolgreich war, oder der Status wird festgelegt isError Variable auf true, wenn dies nicht der Fall ist.

Je nach Status werden dann entweder Daten von der API oder eine Fehlermeldung gerendert. Während die API-Anfrage aussteht, wird auf der Seite der Text „Wird geladen…“ angezeigt.

Die useHook()-Implementierung

Die obige Komponente ist etwas umständlich, da sie voller Boilerplate-Code ist. Um dieses Problem zu lösen, bringen Sie Folgendes ein verwenden() Hooken Sie Ihren Code ein und überarbeiten Sie ihn.

Mit dem use()-Hook können Sie die obige Komponente auf nur zwei Codezeilen reduzieren. Beachten Sie jedoch vorher, dass dieser Hook recht neu ist und Sie ihn daher nur in der experimentellen Version von React verwenden können. Stellen Sie also sicher, dass Sie diese Version verwenden:

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

Jetzt können Sie den Haken verwenden. Beginnen Sie mit dem Ersetzen des Hakens useState Und useEffect Importe mit nur verwenden:

import {use} from"react"

Im Inneren Daten Komponente, das Einzige, was Sie behalten werden, ist die Abrufanforderung. Sie müssen die Abrufanforderung jedoch in Ihre einschließen verwenden() Haken; es gibt entweder JSON-Daten oder einen Fehler zurück. Setzen Sie dann die Antwort auf eine Variable namens Daten:

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

Das ist alles! Wie Sie sehen können, reduziert der obige Code die Komponente auf nur zwei Codezeilen. Das zeigt, wie nützlich der use()-Hook in solchen Szenarien sein kann.

Ladezustand (Suspense)

Ein wichtiger Teil der verwenden() Hook verarbeitet die Lade- und Fehlerzustände. Sie können dies innerhalb der übergeordneten Komponente von tun Daten.

Um die Ladefunktion zu implementieren, wickeln Sie die ein Daten Komponente mit Spannung. Diese Komponente benötigt eine Fallback-Requisite, die immer dann gerendert wird, wenn Sie sich im Ladezustand befinden:

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

 </Suspense>
 </>
 )
}

Der verwenden() Der Hook in der Datenkomponente löst das Laden dieser Spannung aus. Während das Versprechen noch gelöst werden muss, ist das App Die Komponente rendert den Fallback-Status. Dann, wenn die Daten Wenn die Komponente die Antwortdaten empfängt, rendert sie den Inhalt anstelle des Ladezustands.

Fehlerbehandlung mit Fehlergrenze

Wenn es darum geht, Fehler zu erkennen, müssen Sie Bescheid wissen wie die Fehlergrenze funktioniert um es zu benutzen. Normalerweise verwenden Sie es, wenn Sie mit Suspense arbeiten.

Ein Beispiel für eine Fehlergrenze finden Sie im folgenden Code:

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;

Dieses Error Boundary-Beispiel verfügt über ein Statusobjekt, das den Fehlerstatus und den Fehler verfolgt. Als nächstes wird der abgeleitete Status aus diesem Fehler abgerufen. Der machen() Die Funktion zeigt das Fallback-Element an, wenn ein Fehler vorliegt. Andernfalls wird alles gerendert, was sich darin befindet .

Die obige Komponente funktioniert im Wesentlichen genauso wie Suspense. In der App-Komponente können Sie also alles einschließen Fehlergrenze Komponente wie folgt:

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