Innholdsfortegnelse[Gjemme seg][Forestilling]
Hvis du er en React-utvikler som ennå ikke har lært om React-hooks, er øyeblikket nå. Dette innlegget vil gå gjennom useEffect React Hook i detalj. Det tilsvarer kroken til en sveitsisk hærkniv. Det løser en rekke problemer, som hvordan du får data når en komponent monteres, hvordan du kjører kode når en tilstand eller en prop endres, hvordan du setter opp tidtakere eller intervaller, og så videre.
En useEffect brukes til stort sett alt du vil "gjøre" i en React-komponent som ikke returnerer JSX (enhver type bivirkning). Du kan også ha flere brukseffekter per komponent.
All denne kraften har en kostnad: med mindre du forstår hvordan det fungerer, kan det være forvirrende. I dette innlegget skal vi se på en rekke eksempler slik at du kan forstå den konseptuelle modellen og bruke den på din egen kode.
Reager kroker – Hva prøver den å løse?
Hooks ble først introdusert i React versjon 16.8 og brukes nå av mange React-prosjekter. Hooks overvinner problemet med kodegjentakelse mellom komponenter. De er skrevet uten bruk av klasser. Dette betyr ikke at React forlater klasser; kroker er rett og slett en alternativ metode.
React lar deg raskt lage sofistikerte komponenter med stateful logikk. Det er vanskelig å skille disse komponentene siden klassen er avhengig av React Lifecycle Methods. Det er her React Hooks kommer inn.
De lar deg dele opp en komponent i mindre funksjoner. I stedet for å dele kode i mindre deler basert på livssyklusmetoder, kan du nå ordne og skille kode i mindre enheter avhengig av funksjonalitet.
Hva er useEffect Hook?
Hooks er funksjoner som lar deg få tilgang til tilstands- og andre reaksjonsevner uten å måtte skrive ES6-klasser. React hooks API har en krok kalt useEffect. Hvis du er kjent med reaksjonslivssykluser, er useEffect-kroken den samme som componentDidMount, componentDidUpdateog componentWillUnmount livssyklusmetoder kombinert.
I følge React Hooks-dokumentasjonen ble den laget for å løse noen av problemene med livssyklusmetoder for ES6-klassekomponenter.
syntax
Det første argumentet er en tilbakeringingsfunksjon, som kjøres som standard etter hver gjengivelse. Den andre parameteren er en valgfri Dependency-array som instruerer Hook om å ringe tilbake bare hvis måltilstanden endres.
The Hook sammenligner hver avhengighets historiske og nåværende tilstander. Hvis de to verdiene ikke samsvarer, kaller kroken tilbakeringingen spesifisert i den første parameteren. Avhengighetsmatriser endrer den vanlige tilbakeringingsadferden og garanterer at Hook ignorerer alle andre komponenter i komponentomfanget.
Grunnleggende bruk
For å lagre en melding bruker jeg React useState i kodeeksemplet ovenfor. Etter det tar jeg meldingstilstandsvariabelen min og skriver den ut på skjermen. Imidlertid vil jeg nå brukeEffect for å endre meldingen et sekund etter at komponenten er montert.
Jeg har satt inn effekten min bak useState-linjen etter import av useEffect fra React-rammeverket. Den første parameteren som skal brukesEffect er en funksjon. Når denne funksjonsbehandleren er utført, vil den ta seg av eventuelle bivirkninger du gir. Funksjonen er en tilbakeringingsfunksjon som kalles når en av livssyklushendelsene i React-komponenten inntreffer.
Når skal du bruke den?
UseEffect-kroken kan være nyttig i en rekke situasjoner. Følgende er de mest avgjørende:
- Vi kan endre denne parameteren fra klientsiden når vi ønsker å hente data avhengig av et oppgitt argument. Den vil bli tilbakekalt etter at parameteren har blitt oppdatert med ferske data.
- Hvis vi ønsker å hente data fra et API-endepunkt og vise det på klientsiden. Når komponenten vår gjengis, utføres funksjonen eller behandleren som er gitt til useEffect-kroken, og data i komponenttilstandene hentes. Disse statusene brukes deretter i brukergrensesnittkomponenter.
- Når komponenten din er avhengig av data fra omverdenen og vi ikke kan sikre at data kommer frem, bør vi brukeEffect (kanskje serveren er der nede). I stedet for å kaste problemer og forhindre at andre komponenter vises, plasser dem i useEffect-kroken.
Bruksmåter
Hvis komponenten gjengis etter den første kjøringen, vil den ikke kjøres.
Hver gang en komponent gjengis eller gjengis, skal den alltid kjøres.
Som standard kjører programmet bare én gang. Etterpå, hvis prop-verdiene endres, kjør:
For asynkrone aktiviteter, bruk alltid useEffect.
useEffect-kodeblokker er åpenbare markører for asynkrone jobber for andre utviklere. Det er mulig å lage asynkron kode uten å bruke useEffect, men dette er ikke «React-metoden», og det øker både kompleksiteten og risikoen for feil.
Å bruke useEffect i stedet for å skrive asynkron kode som kan stoppe brukergrensesnittet er en velkjent teknikk i React-fellesskapet, spesielt måten React-teamet har bygget det for å utføre en bivirkning.
En annen fordel med å bruke den er at utviklere ganske enkelt kan se gjennom koden og umiddelbart oppdage kode som kjøres "utenfor kontrollflyten", noe som blir viktig først etter den første gjengivelsessyklusen. Videre er blokkene egnet for utvinning til gjenbrukbare og enda mer semantiske tilpassede kroker.
Et eksempel
Bruk useEffect-koden, øk et tall per sekund.
konklusjonen
Å forstå de underliggende designprinsippene og beste praksisene til useEffect Hook er etter mitt syn en kritisk ferdighet å lære hvis du ønsker å bli en React-utvikler på neste nivå.
For å oppsummere mottar useEffect Hook en funksjon som inkluderer imperativ, potensielt effektfull logikk. Avhengighetsmatrisen, som er den andre parameteren, kan brukes til å påvirke utførelsen. Mens du håndterer det, er det også nødvendig å skrive rensekode ved å bruke returfunksjonen.
Gi oss beskjed i kommentarene om artikkelen var nyttig.
Legg igjen en kommentar