Anvendelsen af brugerdefinerede hooks i React har etableret sig som en genial tilgang til at abstrahere gentagen logik og forbedre læsbarheden samt vedligeholdelsen af dine komponenter. I denne vejledning vil du lære, hvordan du kan oprette dine egne hooks, specifikt til at hente JSON-data fra en server, ved hjælp af eksemplet "useJsonFetch". Lad os dykke lige ned i emnet.
Vigtigste erkendelser
- Brugerdefinerede hooks er enkle funktioner, der bruger React-hooks.
- De muliggør genanvendelighed af logik på tværs af flere komponenter.
- En brugerdefineret hook kan håndtere flere tilstande som f.eks. loading, data og fejl.
- Strukturen og implementeringen af en brugerdefineret hook er enkel og overskuelig.
Trin-for-trin vejledning til oprettelse af useJsonFetch Hooks
Grundlæggende overvejelser
Før du skriver din egen hook, er det vigtigt at definere den funktionalitet, du har brug for. I dette tilfælde ønsker du at oprette en hook, der henter JSON-data fra en server. Vi kalder vores hook "useJsonFetch". For at forstå, hvordan du implementerer denne hook, skal du først se på brugen af useJsonFetch i en komponent.
Du kalder hooket og angiver URL'en, hvorfra du vil hente JSON-data. Hooket vil være ansvarlig for at hente dataene samt håndtere indlæsnings- og fejltilstande.
Implementering af useJsonFetch
For at implementere den brugerdefinerede hook opretter du en ny fil, der starter med "use" for at følge Reacts konventioner. Filnavnet ville derfor være useJsonFetch.js.
I denne fil opretter du en funktion, der modtager URL'en som parameter. I funktionen definerer du tilstandene for data, fejl og indlæsning.
Data er i starten undefined, fejl er også og indlæsning starter som true for at angive indlæsningsstaten. Dette skyldes, hvordan JavaScript håndterer asynkrone operationer.
Brug af useEffect
I hooket bruger du useEffect til at starte fetch-processen, når komponenten er monteret. Sørg for at opdatere indlæsningsstaten korrekt.
Med await kalder du først URL'en med fetch. Da fetch returnerer et løfte, kan du afvente svaret med await. Efter modtagelse af svaret konverterer du dataene til et JavaScript-objekt med.json().
Hvis der opstår en fejl, fanger du den med try-catch og angiver fejltilstanden. Uanset om anmodningen var vellykket, eller der opstod en fejl, skal du sikre dig, at loadning sættes til false, når svaret er modtaget.
Returnering af hooket
Til sidst returnerer du tilstandene data, fejl og indlæsning som et objekt, så de er tilgængelige for den kaldende komponent.
Brug af hooket i en komponent
Når du har oprettet din hook, kan du bruge den i din komponent. Importer useJsonFetch i din komponent og brug destruktureringsmetoden til at få adgang til værdierne.
Du kan derefter implementere en indlæsningsvisning ved at undersøge indlæsning, og vise de data, du har hentet, når de er tilgængelige.
Ved at bruge useJsonFetch kan du opretholde den logiske adskillelse mellem datahentning og UI-logik, hvilket markant forbedrer vedligeholdelsen af dine komponenter.
Konklusion om oprettelse af brugerdefinerede hooks
Oprettelse af brugerdefinerede hooks er en enkel, men effektiv proces, der hjælper dig med at organisere din kode. Du kan indkapsle genanvendelig logik og implementere den i enhver komponent, der har brug for den samme funktionalitet. Ved at bruge brugerdefinerede hooks kan du også adskille netværkskald og reaktionen på indlæsnings- eller fejltider fra præsentationen af data.
Opsamling
Med din egen hook som useJsonFetch lærer du at håndtere asynkrone datahentninger i React. Dette forbedrer i høj grad genanvendeligheden og strukturen af din kode. Du har set, hvordan du kan opbygge en simpel struktur til at hente JSON-data og effektivt administrere de forskellige tilstande.
Ofte stillede spørgsmål
Hvad er en Custom Hook?En Custom Hook er en JavaScript-funktion, der bruger React Hooks til at inkapsle logik, som kan genbruges i flere komponenter.
Hvordan implementerer jeg useJsonFetch Hook?Opret en funktion i en ny fil, der tager URL'en som parameter og bruger React Hooks som useState og useEffect.
Hvorfor skal jeg bruge Custom Hooks?At bruge Custom Hooks gør det muligt for dig at forenkle gentagen logik og organisere koden. Det forbedrer vedligeholdelsen af dine komponenter.
Kan jeg have flere Hooks i en fil?Ja, du kan definere og eksportere flere Hooks i en fil, så længe de passer til en bestemt kontekst eller funktionalitet.
Hvordan håndterer jeg fejl i en Custom Hook?Du kan fange fejl med en try-catch-blok og opdatere fejltilstanden derefter.
