UseEffect, useLayoutEffect och useEffectEvent: En jämförelse av datahämtningskrokar i React

React-krokar är ett kraftfullt sätt att hantera biverkningar i React-komponenter. Tre av de vanligaste krokarna för att hantera biverkningar är useEffect, useLayoutEffect och useEffectEvent. Varje krok har sitt unika användningsområde, så det är viktigt att välja rätt för jobbet.

UseEffect Hook

De useEffect krok är en fundamental krok i React som låter dig utföra biverkningar som DOM-manipulation, asynkrona operationer och datahämtning i funktionella komponenter. Denna krok är en funktion som tar två argument, effektfunktionen och beroendematrisen.

Effektfunktionen innehåller koden som utför bieffekten, och beroendematrisen bestämmer när effektfunktionen körs. Om beroendematrisen är tom, körs effektfunktionen endast en gång vid den initiala renderingen av komponenten. Annars körs effektfunktionen när något av värdena i beroendematrisen ändras.

Här är ett exempel på hur man använder useEffect-kroken för att hämta 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;

Denna kod visar en App komponent som hämtar data från ett externt API med hjälp av useEffect-kroken. Effektfunktionen för useEffect hämtar exempeldata från JSONPlaceholder API. Den analyserar sedan JSON-svaret och ställer in den hämtade datan till data stat.

Med datatillståndet återger appkomponenten titel egendom för varje objekt i staten.

Egenskaper för användningenEffect Hook

• Asynkron vänlig: Den stöder asynkrona operationer inbyggt, vilket gör det bekvämt för datahämtning.
• Körs efter rendering: UseEffect-kroken exekverar sina effekter efter att applikationen renderat komponenten, och säkerställer att kroken inte blockerar användargränssnittet.
• Städa: Det tillhandahåller ett integrerat sätt att utföra rensning genom att returnera en funktion. Detta kan vara särskilt användbart när du arbetar med lyssnare eller prenumerationer.

UseLayoutEffect Hook

De useLayoutEffect krok liknar den useEffect krok men körs synkront efter alla DOM-mutationer. Det betyder att den körs innan webbläsaren kan måla skärmen, vilket gör den lämplig för uppgifter som kräver precision kontroll över DOM-layouten och stilarna, som att mäta storleken på ett element, ändra storlek på ett element eller animera dess placera.

Nedan är ett exempel på hur man använder useLayoutEffect-kroken för att ändra 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;

Kodblocket ovan ökar bredden på knappelementet med 12 pixlar med hjälp av useLayoutEffect-kroken. Detta säkerställer att knappens bredd ökar innan knappen visas på skärmen.

Egenskaper för useLayoutEffect Hook

• Synkron: Det körs synkront, vilket potentiellt blockerar användargränssnittet om operationen i den är tung.
• DOM läs/skriv: Den är bäst lämpad för att läsa och skriva direkt till DOM, speciellt om du behöver ändringarna innan webbläsaren målas om.

UseEffectEvent Hook

De useEffectEvent hook är en React-hook som löser beroendeproblemen hos useEffect krok. Om du är bekant med useEffect vet du att dess beroendematris kan vara knepig. Ibland måste du lägga in fler värden i beroendematrisen som är absolut nödvändiga.

Till exempel:

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;

Denna kod visar App komponent som hanterar en anslutning till en extern tjänst. De ansluta funktionen ansluter till en angiven URL, medan logAnslutning funktionen loggar anslutningsdetaljerna. Slutligen på Ansluten funktionen anropar logAnslutning funktion för att logga ett lyckat anslutningsmeddelande när enheten ansluter.

useEffect-kroken anropar connect-funktionen och ställer sedan in en onConnected-återuppringningsfunktion som ska köras när enhet utlöser händelsen onConnected. Denna återuppringning loggar ett anslutningsmeddelande. Den returnerar en rensningsfunktion som aktiveras när komponenten avmonteras. Denna rengöringsfunktion ansvarar för att koppla bort enheten.

Beroendematrisen har url variabel och på Ansluten fungera. App-komponenten kommer att skapa onConnected-funktionen vid varje rendering. Detta kommer att göra att useEffect-funktionen körs i en loop, som kommer att fortsätta att återrendera appkomponenten.

Det finns flera sätt att lösa problemet med useEffect-slingan. Ändå är det mest effektiva sättet att göra det utan att lägga till fler onödiga värden till din beroendematris 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;

Genom att slå in onConnected-funktionen med useEffectEvent-kroken kan useEffectEvent-kroken alltid läsa de senaste värdena för meddelande och inloggningsalternativ parametrar innan du skickar den till useEffect-kroken. Detta innebär att useEffect inte behöver förlita sig på onConnected-funktionen eller de värden som skickas till den.

UseEffectEvent-kroken är användbar när du vill att din useEffect ska bero på ett specifikt värde, även om effekt utlöser en händelse som kräver andra värden som du föredrar att inte använda som beroenden i useEffect.

Egenskaper för användningenEffectEvent Hook

• Det är bäst lämpat för händelsedrivna biverkningar.
• De useEffectEvent hook fungerar inte med händelsehanterare som påKlicka, på Ändra, etc.

UseEffectEvent-kroken är fortfarande experimentell och inte tillgänglig i React version 18 krokar.

När ska man använda vilken krok?

Var och en av ovanstående datahämtningskrokar är lämpliga för olika situationer:

• Hämtar data: UseEffect är ett utmärkt val.
• Direkta DOM-manipulationer: Om du behöver göra synkrona ändringar av DOM innan en ommålning, välj useLayoutEffect.
• Lättviktsoperationer: För operationer som inte riskerar att blockera användargränssnittet kan du fritt använda useEffect.
• Händelsestyrda biverkningar: Använd useEffectEvent-kroken för att avsluta händelserna och useEffect-kroken för att köra biverkningarna.

Hantera biverkningar effektivt

React-hakarna öppnar upp en värld av möjligheter och förstår skillnaden mellan useEffect, useLayoutEffect och useEffectEvent-krokar kan avsevärt påverka hur du hanterar biverkningar och DOM manipulation. Det är viktigt att överväga dessa krokars specifika krav och konsekvenser för att göra användarvänliga applikationer.