UseEffect, useLayoutEffect og useEffectEvent: En sammenligning av datahentingskroker i React

React-kroker er en kraftig måte å håndtere bivirkninger i React-komponenter på. Tre av de vanligste krokene for å håndtere bivirkninger er useEffect, useLayoutEffect og useEffectEvent. Hver krok har sitt unike bruksområde, så det er viktig å velge den rette for jobben.

UseEffect Hook

De useEffect krok er en fundamental krok i React som lar deg utføre bivirkninger som DOM-manipulasjon, asynkrone operasjoner og datahenting i funksjonelle komponenter. Denne kroken er en funksjon som tar to argumenter, effektfunksjonen og avhengighetsmatrisen.

Effektfunksjonen inneholder koden som utfører bivirkningen, og avhengighetsmatrisen bestemmer når effektfunksjonen kjører. Hvis avhengighetsmatrisen er tom, kjører effektfunksjonen bare én gang ved den første gjengivelsen av komponenten. Ellers kjører effektfunksjonen hver gang noen av verdiene i avhengighetsmatrisen endres.

Her er et eksempel på hvordan du bruker useEffect-kroken for å hente data:

import React from"react";
functionApp() {
const [data, setData] = React.useState([]);
 React.useEffect(() => {
 fetch("")
 .then((response) => response.json())
 .then((data) => setData(data));
 }, []);
return (

"app">
 {data.map((item) => (
{item.title}</div>
 ))}
 </div>
 );
}
exportdefault App;

Denne koden demonstrerer en App komponent som henter data fra en ekstern API ved hjelp av useEffect-kroken. Effektfunksjonen til useEffect henter eksempeldata fra JSONPlaceholder API. Den analyserer deretter JSON-svaret og setter de hentede dataene til data stat.

Med datatilstanden gjengir app-komponenten tittel eiendommen til hver vare i staten.

Egenskaper ved brukenEffect Hook

• Asynkron vennlig: Den støtter asynkrone operasjoner naturlig, noe som gjør den praktisk for datahenting.
• Kjører etter gjengivelse: UseEffect-kroken utfører effektene etter at applikasjonen gjengir komponenten, og sikrer at kroken ikke blokkerer brukergrensesnittet.
• Rydde opp: Det gir en integrert måte å utføre opprydding ved å returnere en funksjon. Dette kan være spesielt nyttig når du jobber med lyttere eller abonnementer.

UseLayoutEffect-kroken

De useLayoutEffect krok ligner på useEffect krok, men kjører synkront etter alle DOM-mutasjoner. Dette betyr at den kjører før nettleseren kan male skjermen, noe som gjør den egnet for oppgaver som krever presise kontroll over DOM-oppsettet og stilene, for eksempel å måle størrelsen på et element, endre størrelsen på et element eller animere dets posisjon.

Nedenfor er et eksempel på hvordan du bruker useLayoutEffect-kroken til å endre bredden på en knapp element:

import React from"react";
functionApp() {
const button = React.useRef();
 React.useLayoutEffect(() => {
const { width } = button.current.getBoundingClientRect();
 button.current.style.width = `${width + 12}px`;
 }, []);
return (

"app">
Click Me</button>
 </div>
 );
}
exportdefault App;

Kodeblokken ovenfor øker bredden på knappeelementet med 12 piksler ved å bruke useLayoutEffect-kroken. Dette sikrer at knappebredden øker før knappen vises på skjermen.

Egenskaper ved bruk LayoutEffect Hook

• Synkron: Den kjøres synkront, og blokkerer potensielt brukergrensesnittet hvis operasjonen i den er tung.
• DOM lese/skrive: Den egner seg best for lesing og skriving direkte til DOM, spesielt hvis du trenger endringene før nettleseren males på nytt.

UseEffectEvent Hook

De useEffectEvent hook er en React-hook som løser avhengighetsproblemene til useEffect krok. Hvis du er kjent med useEffect, vet du at avhengighetsarrayen kan være vanskelig. Noen ganger må du legge inn flere verdier i avhengighetsmatrisen som er strengt nødvendige.

For eksempel:

import React from"react";
functionApp() {
const connect = (url) => {
// logic for connecting to the url
 };
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
 };
const onConnected = (url, loginOptions) => {
 logConnection(`Connected to ${url}`, loginOptions);
 };
 React.useEffect(() => {
const device = connect(url);
 device.onConnected(() => {
 onConnected(url);
 });
return() => {
 device.disconnect();
 };
 }, [url, onConnected]);
return<div>div>;
}
exportdefault App;

Denne koden demonstrerer App komponent som administrerer en tilkobling til en ekstern tjeneste. De koble funksjonen kobles til en spesifisert URL, mens logConnection funksjonen logger tilkoblingsdetaljene. Til slutt, den påTilkoblet funksjonen kaller logConnection funksjon for å logge en vellykket tilkoblingsmelding når enheten kobles til.

useEffect-kroken kaller opp tilkoblingsfunksjonen, og setter deretter opp en onConnected tilbakeringingsfunksjon som skal utføres når enhet utløser onConnected-hendelsen. Denne tilbakeringingen logger en tilkoblingsmelding. Den returnerer en oppryddingsfunksjon som aktiveres når komponenten demonteres. Denne oppryddingsfunksjonen er ansvarlig for å koble fra enheten.

Avhengighetsmatrisen har url variabel og påTilkoblet funksjon. App-komponenten vil opprette onConnected-funksjonen på hver gjengivelse. Dette vil føre til at useEffect-funksjonen kjøres på en sløyfe, som vil fortsette å gjengi app-komponenten på nytt.

Det er flere måter å løse useEffect-løkkeproblemet på. Likevel er den mest effektive måten å gjøre det på uten å legge til flere unødvendige verdier til avhengighetsmatrisen med useEffectEvent-kroken.

import React from"react";
functionApp() {
const connect = (url) => {
// logic for connecting to the URL
 };
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
 };
const onConnected = React.useEffectEvent((url, loginOptions) => {
 logConnection(`Connected to ${url}`, loginOptions);
 });
 React.useEffect(() => {
const device = connect(url);
 device.onConnected(() => {
 onConnected(url);
 });
return() => {
 device.disconnect();
 };
 }, [url]);
return<div>div>;
}
exportdefault App;

Ved å pakke onConnected-funksjonen med useEffectEvent-kroken, kan useEffectEvent-kroken alltid lese de siste verdiene til beskjed og påloggingsalternativer parametere før du sender den til useEffect-kroken. Dette betyr at useEffect ikke trenger å stole på onConnected-funksjonen eller verdiene som sendes til den.

useEffectEvent-kroken er nyttig når du vil at useEffect skal avhenge av en bestemt verdi, selv om effekt utløser en hendelse som krever andre verdier som du foretrekker å ikke bruke som avhengigheter i useEffect.

Egenskaper for brukenEffectEvent Hook

• Det er best egnet for hendelsesdrevne bivirkninger.
• De useEffectEvent hook fungerer ikke med hendelsesbehandlere som ved trykk, på Endre, etc.

UseEffectEvent-kroken er fortsatt eksperimentell og utilgjengelig i React versjon 18 kroker.

Når skal man bruke hvilken krok?

Hver av de ovennevnte datahentingskrokene passer for forskjellige situasjoner:

• Henter data: UseEffect er et utmerket valg.
• Direkte DOM-manipulasjoner: Hvis du trenger å gjøre synkrone endringer i DOM før en ommaling, velg useLayoutEffect.
• Lette operasjoner: For operasjoner som ikke risikerer å blokkere brukergrensesnittet, kan du fritt bruke useEffect.
• Hendelsesdrevne bivirkninger: Bruk useEffectEvent-kroken til å pakke inn hendelsene og useEffect-kroken til å kjøre bivirkningene.

Håndter bivirkninger effektivt

React-krokene åpner opp en verden av muligheter, og forstår forskjellen mellom brukseffekten, useLayoutEffect og useEffectEvent-kroker kan ha stor innvirkning på hvordan du håndterer bivirkninger og DOM manipulasjon. Det er viktig å vurdere disse krokenes spesifikke krav og implikasjoner for å lage brukervennlige applikasjoner.