Bruken av egendefinerte hooks i React har etablert seg som en genial tilnærming for å abstrahere gjentagende logikk og forbedre lesbarheten og vedlikeholdet av komponentene dine. I denne opplæringen vil du lære, gjennom eksempelet " useJsonFetch ", hvordan du kan lage dine egne hooks som er spesifikt designet for å hente JSON-data fra en server. La oss dykke rett inn i det.

Viktigste funn

  • Egendefinerte hooks er enkle funksjoner som bruker React-hooks.
  • De tillater gjenbruk av logikk på tvers av flere komponenter.
  • En egendefinert hook kan håndtere flere tilstander som lasting, data og feil.
  • Strukturen og implementeringen av en egendefinert hook er ukomplisert og oversiktlig.

Trinn-for-trinn-guide for å lage useJsonFetch hook

Grunnleggende overveielser

Før du skriver din egen hook, er det viktig å definere funksjonaliteten du trenger. I dette tilfellet vil du lage en hook som henter JSON-data fra en server. Vi kaller vår hook "useJsonFetch". For å forstå hvordan du implementerer denne hook, kan du først se på bruken av useJsonFetch i en komponent.

Egne hooks i React: Lag useJsonFetch-hooken

Du kaller på hooken og sender med URL-en du vil hente JSON-data fra. Hooken vil være ansvarlig for henting av dataene og håndtering av lasting og feiltilstander.

Implementering av useJsonFetch

For å implementere den egendefinerte hooken, oppretter du en ny fil som starter med "use" for å følge Reacts konvensjoner. Filnavnet vil derfor være useJsonFetch.js.

I denne filen oppretter du en funksjon som tar URL-en som parameter. I funksjonen definerer du tilstandene for data, feil og lasting.

I dette tilfellet er data i begynnelsen undefined, feil også, og lasting starter som true for å markere lastingstilstanden. Dette skyldes hvordan JavaScript håndterer asynkrone operasjoner.

Bruk av useEffect

Inne i hooken bruker du useEffect for å starte henteprosessen når komponenten monteres. Pass på å oppdatere lastingstilstanden tilsvarende.

Ved å bruke await ringer du først URL-en med fetch. Siden fetch returnerer et Promise, kan du vente på svaret med await. Etter å ha hentet svaret, konverterer du dataene til et JavaScript-objekt med.json().

Hvis det oppstår en feil, fanger du den med try-catch og setter feiltilstanden. Uavhengig av om forespørselen var vellykket eller en feil oppstod, bør du sørge for å sette lasting til false så snart svaret kommer.

Egne Hooks i React: Lag useJsonFetch Hooken

Retur av hooken

Til slutt returnerer du tilstandene data, feil og lasting som et objekt, slik at de er tilgjengelige for den kallende komponenten.

Bruk av hooken i en komponent

Nå som du har opprettet hooken din, kan du bruke den i komponenten din. Importer useJsonFetch i komponenten din og bruk destrukturering for å hente verdiene.

Du kan deretter implementere lastingvisningen ved å spørre om lasting, og vise dataene du har hentet når de er tilgjengelige.

Ved å bruke useJsonFetch kan du opprettholde den logiske separasjonen mellom datahenting og UI-logikk, noe som vesentlig forbedrer vedlikeholdet av komponentene dine.

Konklusjon om opprettelse av egendefinerte hooks

Opprettelsen av egendefinerte hooks er en enkel men effektiv prosess som hjelper deg med å organisere koden din. Du kan kapsle gjenbrukbar logikk og implementere den i alle komponenter som trenger samme funksjonalitet. Ved å bruke egendefinerte hooks kan du også skille nettverkshenting og respons på lasting- eller feiltitler fra visningen av dataene.

Oppsummering

Med en egen hook som useJsonFetch, lærer du hvordan du kan håndtere asynkrone datahentinger i React. Dette øker gjenbrukbarheten og strukturen til koden din betydelig. Du har sett hvordan du kan bygge en enkel struktur for å hente JSON-data og effektivt håndtere ulike tilstander.

Ofte stilte spørsmål

Hva er en Custom Hook?En Custom Hook er en JavaScript-funksjon som bruker React Hooks for å innkapsle logikk som kan gjenbrukes i flere komponenter.

Hvordan implementerer jeg useJsonFetch-hooken?Lag en funksjon i en ny fil som tar URL-en som parameter og bruker React Hooks som useState og useEffect.

Hvorfor bør jeg bruke Custom Hooks?Å bruke Custom Hooks lar deg forenkle gjentakende logikk og organisere koden. Det forbedrer vedlikeholdbarheten til komponentene dine.

Kan jeg ha flere Hooks i en fil?Ja, du kan definere og eksportere flere Hooks i en fil så lenge de passer til en bestemt kontekst eller funksjonalitet.

Hvordan håndterer jeg feil i en Custom Hook?Du kan fange feil med en try-catch-blokk og oppdatere feiltilstanden deretter.