Lastne kavlje v Reactu: Ustvarite kavelj useJsonFetch

Uporaba prilagojenih Hooksov v Reactu se je izkazala za genialen pristop za abstrahiranje ponavljajoče se logike ter za izboljšanje berljivosti in vzdržljivosti vaših komponent. V tem vadnici boste spoznali, kako napisati svoje Hookse, posebej zasnovane za pridobivanje JSON podatkov s strežnika, na primer "useJsonFetch". Poglejmo si korak za korakom.

Pomembna spoznanja

• Prilagojeni Hooksi so preproste funkcije, ki uporabljajo React Hookse.
• Omogočajo ponovno uporabo logike preko več komponent.
• Prilagojen Hook lahko obvladuje več stanj, kot so nalaganje, podatki in napaka.
• Struktura in implementacija prilagojenega Hooksa sta preprosta in pregledna.

Korak za korakom vodnik za ustvarjanje uporabnika uporabe uporabaJsonFetch Hooks

Osnovno razmišljanje

Preden napišete svoj Hook, je pomembno definirati funkcionalnost, ki jo potrebujete. V tem primeru želite ustvariti Hook, ki pridobiva JSON podatke s strežnika. Imenujemo ga "useJsonFetch". Da bi razumeli, kako implementirati ta Hook, si najprej oglejmo uporabo uporabeJsonFetch v komponenti.

Kličete Hook in podajte URL, s katerega želite pridobiti JSON podatke. Hook bo odgovoren za pridobivanje podatkov ter obvladovanje stanj nalaganja in napak.

Implementacija uporabeJsonFetch

Za implementacijo prilagojenega Hooksa ustvarite novo datoteko, ki se začne z "use", da sledite konvencijam Reacta. Ime datoteke bi bilo torej useJsonFetch.js.

V tej datoteki ustvarite funkcijo, ki sprejema URL kot parameter. V funkciji definirate stanja za podatke, napako in nalaganje.

Tukaj so podatki na začetku nedoločeni, napaka tudi in nalaganje začne z true, da označi stanje nalaganja. To izhaja iz načina, kako se JavaScript spoprijema s asinhronimi operacijami.

Uporaba useEffect

V Hooksu uporabite useEffect, da zaženete postopek pridobivanja, ko se komponenta prikaže. Pazite, da ustrezno posodobite stanje nalaganja.

Zawaitom najprej pokličete URL s fetch. Ker fetch vrne Promise, odgovor počakate z awaitom. Po pridobivanju odgovora pretvorite podatke z.json() v JavaScript objekt.

V primeru napake jo skušajte ujeti z try-catch in nastavite stanje napake. Ne glede na to, ali je zahteva uspešno izvedena ali se pojavi napaka, poskrbite, da stanje nalaganja nastavite na false, ko odgovor prispe.

Vračanje Hooksov

V končni fazi vrnite stanja podatkov, napako in nalaganje kot objekt, da so ti podatki na voljo komponenti, ki kliče.

Uporaba Hooksa v komponenti

Zdaj, ko ste ustvarili Hook, ga lahko uporabite v svoji komponenti. Uvozite uporaboJsonFetch v svojo komponento in uporabite destrukturiranje, da dobite vrednosti.

Nato lahko implementirate prikaz nalaganja z preverjanjem nalaganja in prikažete podatke, ki ste jih pridobili, ko so na voljo.

Z uporabo uporabeJsonFetch lahko ohranite logično ločitev med pridobivanjem podatkov in UI logiko, kar pomembno izboljša vzdržljivost vaših komponent.

Zaključek o ustvarjanju prilagojenih Hooksov

Ustvarjanje prilagojenih Hooksov je preprost, a učinkovit postopek, ki vam pomaga organizirati vašo kodo. Lahko zajamete ponovno uporabno logiko in jo implementirate v vsaki komponenti, ki potrebuje enako funkcionalnost. Z uporabo prilagojenih Hooksov lahko tudi ločite mrežno pridobivanje in odziv na stanja nalaganja ali napake od prikaza podatkov.

Povzetek

Z lastnim Hookom, kot je uporabaJsonFetch, se naučite, kako upravljati asinhrona pridobivanja podatkov v Reactu. To bistveno izboljša ponovno uporabnost in strukturo vaše kode. Videli ste, kako lahko vzpostavite preprosto strukturo za pridobivanje JSON podatkov in učinkovito upravljate različna stanja.