Egna Hooks i React: Skapa useJsonFetch Hooken

Användningen av anpassade Hooks i React har etablerat sig som en genial metod för att abstrahera återkommande logik och förbättra läsbarheten och underhållet av dina komponenter. I den här handledningen kommer du att lära dig, med exemplet "useJsonFetch", hur du kan skapa dina egna Hooks skapa som är specifikt avsedda för att hämta JSON-data från en server. Låt oss dyka direkt in i ämnet.

Viktigaste insikter

• Anpassade Hooks är enkla funktioner som använder React Hooks.
• De möjliggör återanvändning av logik över flera komponenter.
• En anpassad Hook kan hantera flera tillstånd som loading, data och error.
• Strukturen och implementeringen av en anpassad Hook är okomplicerad och överskådlig.

Steg-för-steg-guide för att skapa useJsonFetch Hooks

Grundläggande överväganden

Innan du skapar din egen Hook är det viktigt att definiera funktionaliteten du behöver. I det här fallet vill du skapa en Hook som hämtar JSON-data från en server. Vi kallar vår Hook "useJsonFetch". För att förstå hur du implementerar denna Hook, börja med att titta på användningen av useJsonFetch i en komponent.

Du anropar Hooken och skickar med URL:en från vilken du vill hämta JSON-datan. Hooken kommer att vara ansvarig för att hämta datan samt hantera laddnings- och felstegen.

Implementering av useJsonFetch

För att implementera den anpassade Hooken skapar du en ny fil som börjar med "use" för att följa Reacts konventioner. Filnamnet skulle därför vara useJsonFetch.js.

I denna fil skapar du en funktion som tar URL:en som parameter. I funktionen definierar du tillstånden för data, error och loading.

Här är data från början undefined, error också och loading börjar som true för att markera laddningstillståndet. Detta beror på hur JavaScript hanterar asynkrona operationer.

Användning av useEffect

Inom Hooken används useEffect för att starta fetch-processen när komponenten monteras. Se till att du uppdaterar laddnings-tillståndet korrekt.

Med await anropar du först URL:en med fetch. Eftersom fetch returnerar ett Promise kan du vänta på svaret med await. Efter att du har hämtat svaret, konverterar du datan till ett JavaScript-objekt med.json().

Om ett fel uppstår, fångar du det med try-catch och sätter felet. Oavsett om förfrågan var framgångsrik eller fel uppstod, se till att du sätter loading till false när svaret har kommit.

Returnering av Hooken

Till slut returnerar du tillstånden data, error och loading som ett objekt så att den anropande komponenten har tillgång till dessa värden.

Användning av Hooken i en Komponent

Nu när du har skapat din Hook kan du använda den i din komponent. Importera useJsonFetch i din komponent och använd destructuring för att få tag i värdena.

Du kan sedan implementera laddningsindikationen genom att kontrollera loading, och visa datan du har hämtat när den är tillgänglig.

Genom att använda useJsonFetch kan du behålla den logiska uppdelningen mellan datanhämtning och UI-logik, vilket avsevärt förbättrar underhållet av dina komponenter.

Sammanfattning av att skapa anpassade Hooks

Tillverkningen av anpassade Hooks är en enkel men effektiv process som hjälper dig att organisera din kod. Du kan kapsla in återanvändbar logik och implementera den i varje komponent som behöver samma funktionalitet. Genom att använda anpassade Hooks kan du också separera nätverksanropet och hanteringen av laddnings- eller felsteg från visningen av datan.

Summering

Med en egen Hook som useJsonFetch kan du lära dig hur du hanterar asynkrona datanhämtningar i React. Detta förbättrar betydligt återanvändbarheten och strukturen av din kod. Du har sett hur du kan skapa en enkel struktur för att hämta JSON-data och effektivt hantera olika tillstånd.