Hvis du er en React-udvikler, der endnu ikke har lært om React-hooks, er det nu. Dette indlæg vil gennemgå useEffect React Hook i detaljer. Det svarer til en krog, der svarer til en schweizisk hærkniv. Det løser en række forskellige problemer, såsom hvordan man henter data, når en komponent monteres, hvordan man kører kode, når en tilstand eller en prop ændres, hvordan man opsætter timere eller intervaller, og så videre.
En useEffect bruges til stort set alt, hvad du vil "gøre" i en React-komponent, der ikke returnerer JSX (enhver form for bivirkning). Du kan også have flere useEffects pr. komponent.
Al denne kraft har en pris: Medmindre du forstår, hvordan det fungerer, kan det være forvirrende. I dette indlæg vil vi se på en række eksempler, så du kan forstå den konceptuelle model og anvende den på din egen kode.
Reager kroge – Hvad forsøger den at løse?
Hooks blev først introduceret i React version 16.8 og bruges nu af mange React-projekter. Hooks overvinder problemet med kodegentagelse mellem komponenter. De er skrevet uden brug af klasser. Dette betyder ikke, at React forlader klasser; kroge er simpelthen en alternativ metode.
React giver dig mulighed for hurtigt at skabe sofistikerede komponenter med stateful logik. Det er svært at adskille disse komponenter, da klassen er afhængig af React Lifecycle Methods. Det er her, React Hooks kommer ind.
De giver dig mulighed for at opdele en komponent i mindre funktioner. I stedet for at opdele kode i mindre stykker baseret på livscyklusmetoder, kan du nu arrangere og adskille kode i mindre enheder afhængigt af funktionalitet.
Hvad er useEffect Hook?
Hooks er funktioner, der giver dig adgang til tilstands- og andre reaktionsfunktioner uden at skulle skrive ES6-klasser. React hooks API har en hook kaldet useEffect. Hvis du er bekendt med reaktions-livscyklusser, er useEffect-krogen den samme som componentDidMount, componentDidUpdateog componentWillUnmount livscyklusmetoder kombineret.
Ifølge React Hooks-dokumentationen blev den oprettet for at løse nogle af problemerne med ES6-klassens komponentlivscyklusmetoder.
Syntaks
Det første argument er en tilbagekaldsfunktion, som udføres som standard efter hver gengivelse. Den anden parameter er et valgfrit afhængighedsarray, der kun instruerer Hook om at ringe tilbage, hvis måltilstanden ændres.
The Hook sammenligner hver afhængigheds historiske og nuværende tilstande. Hvis de to værdier ikke stemmer overens, kalder Hook tilbagekaldet angivet i den første parameter. Afhængighedsarrays ændrer den sædvanlige tilbagekaldsadfærd og garanterer, at Hook ignorerer alle andre komponenter i komponentomfanget.
Grundlæggende brug
For at gemme en besked bruger jeg React useState i kodeeksemplet ovenfor. Derefter tager jeg min beskedtilstandsvariabel og udskriver den på skærmen. Men jeg vil nu brugeEffect til at ændre beskeden et sekund efter, at komponenten er blevet monteret.
Jeg har indsat min effekt bag useState-linjen efter import af useEffect fra React frameworket. Den første parameter til at brugeEffect er en funktion. Når denne funktionshåndtering udføres, vil den tage sig af eventuelle bivirkninger, du giver. Funktionen er en tilbagekaldsfunktion, der kaldes, når en af React-komponentens livscyklushændelser indtræffer.
Hvornår skal den bruges?
UseEffect-krogen kan være nyttig i en række forskellige situationer. Følgende er de mest afgørende:
- Vi kan ændre denne parameter fra klientsiden, når vi ønsker at hente data afhængigt af et givet argument. Det vil blive genkaldt, efter at parameteren er blevet opdateret med friske data.
- Hvis vi ønsker at hente data fra et API-slutpunkt og vise dem på klientsiden. Når vores komponent gengiver, udføres funktionen eller behandleren, der er givet til useEffect-hook, og data i komponenttilstandene hentes. Disse statusser anvendes derefter i brugergrænsefladekomponenter.
- Når din komponent er afhængig af data fra omverdenen, og vi ikke kan sikre, at data kommer frem, bør vi brugeEffect (måske er serveren dernede). I stedet for at smide problemer og forhindre andre komponenter i at blive vist, skal du placere dem i useEffect-krogen.
Brug sager
Hvis komponenten genrenderes efter den første kørsel, vil den ikke køre.
Når en komponent gengiver eller genrenderer, skal den altid udføres.
Som standard kører programmet kun én gang. Bagefter, hvis prop-værdierne ændres, skal du køre:
Brug altid useEffect til asynkrone aktiviteter.
useEffect-kodeblokke er åbenlyse markører for asynkrone jobs for dine medudviklere. Det er muligt at lave asynkron kode uden at bruge useEffect, men dette er ikke "React-metoden", og det øger både kompleksiteten og risikoen for fejl.
At bruge useEffect i stedet for at skrive asynkron kode, der kan stoppe brugergrænsefladen, er en velkendt teknik i React-fællesskabet, især den måde, som React-teamet har bygget det på til at udføre en bivirkning.
En anden fordel ved at bruge det er, at udviklere simpelthen kan gennemgå koden og straks opdage kode, der køres "uden for kontrolflowet", hvilket først bliver vigtigt efter den første gengivelsescyklus. Desuden er blokkene velegnede til udtrækning i genanvendelige og endnu mere semantiske tilpassede kroge.
Et eksempel
Brug useEffect-koden til at øge et tal pr. sekund.
Konklusion
At forstå de underliggende designprincipper og bedste praksis for useEffect Hook er efter min mening en kritisk færdighed at lære, hvis du ønsker at blive en React-udvikler på næste niveau.
For at opsummere modtager useEffect Hook en funktion, der inkluderer imperativ, potentielt effektfuld logik. Afhængighedsarrayet, som er den anden parameter, kan bruges til at påvirke udførelsen. Mens du beskæftiger dig med det, er det også nødvendigt at skrive rensekode ved hjælp af returfunktionen.
Fortæl os i kommentarerne, hvis artiklen var nyttig.
Giv en kommentar