Om du är en React-utvecklare som ännu inte har lärt dig om React-hooks, är det nu. Det här inlägget kommer att gå igenom useEffect React Hook i detalj. Det är krokmotsvarigheten till en schweizisk armékniv. Det löser en mängd olika problem, som hur man hämtar data när en komponent monteras, hur man kör kod när ett tillstånd eller en rekvisita ändras, hur man ställer in timers eller intervall, och så vidare.
En useEffect används för i stort sett allt du vill "göra" i en React-komponent som inte returnerar JSX (alla typer av biverkningar). Du kan också ha flera användningseffekter per komponent.
All denna kraft kommer till en kostnad: om du inte förstår hur det fungerar kan det vara förvirrande. I det här inlägget kommer vi att titta på en mängd olika exempel så att du kan förstå den konceptuella modellen och tillämpa den på din egen kod.
Reagera krokar – Vad försöker den lösa?
Krokar introducerades först i React version 16.8 och används nu av många React-projekt. Hooks övervinner problemet med kodupprepning mellan komponenter. De är skrivna utan användning av klasser. Detta innebär inte att React överger klasser; krokar är helt enkelt en alternativ metod.
React låter dig snabbt skapa sofistikerade komponenter med stateful logik. Det är svårt att separera dessa komponenter eftersom klassen bygger på React Lifecycle Methods. Det är här React Hooks kommer in.
De låter dig dela upp en komponent i mindre funktioner. Istället för att dela upp kod i mindre bitar baserat på livscykelmetoder kan du nu ordna och separera kod i mindre enheter beroende på funktionalitet.
Vad är useEffect Hook?
Krokar är funktioner som låter dig komma åt tillstånd och andra reaktionsmöjligheter utan att behöva skriva ES6-klasser. React Hooks API har en krok som heter useEffect. Om du är bekant med reageras livscykler är useEffect-kroken densamma som componentDidMount, componentDidUpdateoch componentWillUnmount livscykelmetoder kombinerade.
Enligt React Hooks-dokumentationen skapades den för att lösa några av problemen med ES6-klasskomponentlivscykelmetoder.
syntax
Det första argumentet är en callback-funktion, som exekveras som standard efter varje rendering. Den andra parametern är en valfri beroendematris som instruerar Hook att återkalla endast om måltillståndet ändras.
The Hook jämför varje beroendes historiska och nuvarande tillstånd. Om de två värdena inte stämmer överens, anropar Hook den återuppringning som anges i den första parametern. Beroendematriser ändrar det vanliga återuppringningsbeteendet och garanterar att Hook ignorerar alla andra komponenter i komponentomfånget.
Grundläggande användning
För att spara ett meddelande använder jag React useState i kodexemplet ovan. Efter det tar jag min meddelandestatusvariabel och skriver ut den på skärmen. Men nu vill jag användaEffect för att ändra meddelandet en sekund efter att komponenten har monterats.
Jag har infogat min effekt bakom useState-raden efter att ha importerat useEffect från React-ramverket. Den första parametern att användaEffect är en funktion. När denna funktionshanterare körs kommer den att ta hand om alla biverkningar du ger. Funktionen är en återuppringningsfunktion som anropas när en av React-komponentens livscykelhändelser inträffar.
När ska man använda den?
UseEffect-kroken kan vara användbar i en mängd olika situationer. Följande är de mest avgörande:
- Vi kan ändra denna parameter från klientsidan när vi vill hämta data beroende på ett angett argument. Den kommer att återkallas efter att parametern har uppdaterats med färska data.
- Om vi vill hämta data från en API-slutpunkt och visa den på klientsidan. När vår komponent renderas exekveras funktionen eller hanteraren som ges till useEffect-kroken och data i komponenttillstånden hämtas. Dessa statusar används sedan i användargränssnittskomponenter.
- När din komponent förlitar sig på data från omvärlden och vi inte kan säkerställa att data kommer fram bör vi användaEffect (kanske servern är där nere). Istället för att kasta problem och förhindra att andra komponenter visas, placera dem i useEffect-kroken.
Användningsfall
Om komponenten återrenderas efter den första körningen kommer den inte att köras.
Närhelst en komponent renderar eller återrenderar, ska den alltid köras.
Som standard körs programmet bara en gång. Efteråt, om prop-värdena ändras, kör:
Använd alltid useEffect för asynkrona aktiviteter.
useEffect-kodblock är uppenbara markörer för asynkrona jobb för dina andra utvecklare. Det är möjligt att skapa asynkron kod utan att använda useEffect, men detta är inte "React-metoden", och det ökar både komplexiteten och risken för misstag.
Att använda useEffect istället för att skriva asynkron kod som kan stoppa användargränssnittet är en välkänd teknik inom React-communityt, särskilt hur React-teamet har byggt det för att utföra en bieffekt.
En annan fördel med att använda den är att utvecklare helt enkelt kan granska koden och omedelbart upptäcka kod som körs "utanför kontrollflödet", vilket blir viktigt först efter den första renderingscykeln. Dessutom är blocken lämpliga för utvinning i återanvändbara och ännu mer semantiska anpassade krokar.
Ett exempel
Använd useEffect-koden, öka ett antal per sekund.
Slutsats
Att förstå de underliggande designprinciperna och bästa praxis för useEffect Hook är enligt min uppfattning en kritisk färdighet att lära sig om du vill bli en React-utvecklare på nästa nivå.
För att sammanfatta, useEffect Hook får en funktion som inkluderar imperativ, potentiellt effektfull logik. Beroendematrisen, som är den andra parametern, kan användas för att påverka exekveringen. När du hanterar det är det också nödvändigt att skriva rengöringskod med returfunktionen.
Låt oss veta i kommentarerna om artikeln var till hjälp.
Kommentera uppropet