UseEffect, useLayoutEffect og useEffectEvent: En sammenligning af datahentningskroge i React

React-kroge er en effektiv måde at håndtere bivirkninger i React-komponenter på. Tre af de mest almindelige kroge til håndtering af bivirkninger er useEffect, useLayoutEffect og useEffectEvent. Hver krog har sit unikke brugsområde, så det er vigtigt at vælge den rigtige til jobbet.

UseEffect Hook

Det useEffect krog er en fundamental hook i React der giver dig mulighed for at udføre bivirkninger såsom DOM-manipulation, asynkrone operationer og datahentning i funktionelle komponenter. Denne hook er en funktion, der tager to argumenter, effektfunktionen og afhængighedsarrayet.

Effektfunktionen indeholder koden, der udfører bivirkningen, og afhængighedsarrayet bestemmer, hvornår effektfunktionen kører. Hvis afhængighedsarrayet er tomt, kører effektfunktionen kun én gang ved den indledende gengivelse af komponenten. Ellers kører effektfunktionen, når nogen af ​​værdierne i afhængighedsarrayet ændres.

Her er et eksempel på, hvordan man bruger useEffect-krogen til at 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 kode demonstrerer en App komponent, der henter data fra en ekstern API ved hjælp af useEffect-hook. Effektfunktionen af ​​useEffect henter eksempeldata fra JSONPlaceholder API. Det parser derefter JSON-svaret og sætter de hentede data til data stat.

Med datatilstanden gengiver App-komponenten titel ejendom af hver vare i staten.

Egenskaber ved brugen Effektkrog

• Asynkron venlig: Det understøtter asynkrone operationer indbygget, hvilket gør det praktisk til datahentning.
• Kører efter gengivelse: UseEffect-krogen udfører sine effekter, efter at applikationen gengiver komponenten, og sikrer, at krogen ikke blokerer brugergrænsefladen.
• Ryd op: Det giver en integreret måde at udføre oprydning ved at returnere en funktion. Dette kan især være nyttigt, når du arbejder med lyttere eller abonnementer.

UseLayoutEffect Hook

Det useLayoutEffect krog ligner useEffect krog, men kører synkront efter alle DOM-mutationer. Det betyder, at den kører før browseren kan male skærmen, hvilket gør den velegnet til opgaver, der kræver præcision kontrol over DOM-layoutet og -stilene, såsom at måle størrelsen på et element, ændre størrelsen på et element eller animere dets position.

Nedenfor er et eksempel på, hvordan man bruger useLayoutEffect-krogen til at ændre bredden af ​​en knap 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 øger knapelementets bredde med 12 pixels ved hjælp af useLayoutEffect-krogen. Dette sikrer, at knappens bredde øges, før knappen vises på din skærm.

Karakteristika for useLayoutEffect Hook

• Synkron: Det udføres synkront, hvilket potentielt blokerer brugergrænsefladen, hvis operationen i den er tung.
• DOM læse/skrive: Det er bedst egnet til at læse og skrive direkte til DOM, især hvis du har brug for ændringerne, før browseren maler om.

UseEffectEvent Hook

Det useEffectEvent hook er en React hook, der løser afhængighedsproblemerne useEffect krog. Hvis du er bekendt med useEffect, ved du, at dets afhængighedsarray kan være vanskelig. Nogle gange skal du sætte flere værdier i afhængighedsarrayet, 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 kode demonstrerer App komponent, der administrerer en forbindelse til en ekstern tjeneste. Det Opret forbindelse funktionen forbinder til en specificeret URL, mens logForbindelse funktionen logger forbindelsesdetaljerne. Til sidst påTilsluttet funktionen kalder logForbindelse funktion til at logge en vellykket forbindelsesmeddelelse, når enheden opretter forbindelse.

useEffect-krogen kalder tilslutningsfunktionen og konfigurerer derefter en onConnected-tilbagekaldsfunktion til at udføre, når enhed udløser hændelsen onConnected. Dette tilbagekald logger en forbindelsesmeddelelse. Den returnerer en oprydningsfunktion, der aktiveres, når komponenten afmonteres. Denne oprydningsfunktion er ansvarlig for at afbryde enheden.

Afhængighedsarrayet har url variabel og påTilsluttet fungere. App-komponenten vil oprette onConnected-funktionen ved hver gengivelse. Dette vil få funktionen useEffect til at køre på en løkke, som fortsætter med at gengive app-komponenten.

Der er flere måder at løse useEffect-løkkeproblemet på. Alligevel er den mest effektive måde at gøre det på uden at tilføje flere unødvendige værdier til dit afhængighedsarray med useEffectEvent-krogen.

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 at indpakke onConnected-funktionen med useEffectEvent-krogen, kan useEffectEvent-krogen altid læse de seneste værdier af besked og loginmuligheder parametre, før den overføres til useEffect-krogen. Dette betyder, at useEffect ikke behøver at stole på onConnected-funktionen eller de værdier, der sendes til den.

useEffectEvent-krogen er nyttig, når du ønsker, at din useEffect skal afhænge af en bestemt værdi, selvom effekt udløser en hændelse, der kræver andre værdier, som du foretrækker ikke at bruge som afhængigheder i useEffect.

Karakteristika for brugenEffectEvent Hook

• Det er bedst egnet til hændelsesdrevne bivirkninger.
• Det useEffectEvent hook virker ikke med hændelseshandlere som påKlik, på Skift, etc.

UseEffectEvent-krogen er stadig eksperimentel og ikke tilgængelig i React version 18 kroge.

Hvornår skal man bruge hvilken krog?

Hver af ovenstående datahentningskroge er velegnede til forskellige situationer:

• Henter data: UseEffect er et glimrende valg.
• Direkte DOM-manipulationer: Hvis du har brug for at foretage synkrone ændringer af DOM før en ommaling, skal du vælge useLayoutEffect.
• Letvægtsoperationer: For operationer, der ikke risikerer at blokere brugergrænsefladen, kan du frit bruge useEffect.
• Hændelsesdrevne bivirkninger: Brug useEffectEvent-krogen til at ombryde begivenhederne og useEffect-krogen til at køre bivirkningerne.

Håndter bivirkninger effektivt

React-krogene åbner en verden af ​​muligheder og forstår forskellen mellem useEffect, useLayoutEffect og useEffectEvent-hooks kan have stor indflydelse på, hvordan du håndterer bivirkninger og DOM manipulation. Det er vigtigt at overveje disse kroge's specifikke krav og implikationer for at lave brugervenlige applikationer.