useEffect, useLayoutEffect och useEffectEvent: En jämförelse av datahämtningskrokar i React
React-krokar är ett kraftfullt sätt att hantera sidoeffekter i React-komponenter. Tre av de vanligaste krokarna för hantering av sidoeffekter är useEffect, useLayoutEffect och useEffectEvent. Varje krok har sitt unika användningsområde, så det är viktigt att välja rätt krok för jobbet.
useEffect Hook
funktionen för effektrendering och beroendelistan.
Effektfunktionen kapslar in koden som ansvarar för att producera en sidoeffekt, medan beroendelistan dikterar när nämnda funktion ska exekveras. I de fall där beroendematrisen saknar innehåll kommer effektfunktionen att exekveras enbart under den första renderingen av komponenten. Omvänt, om beroendematrisen innehåller några ändringar, kommer effektfunktionen att utlösas för att köras på nytt med varje modifiering.
En utmärkt illustration av hur useEffect kroken kan användas för att hämta data finns i följande exempel:
import React from "react";
function App() {
const [data, setData] = React.useState([]);
React.useEffect(() => {
fetch("<https://jsonplaceholder.typicode.com/posts>")
.then((response) => response.json())
.then((data) => setData(data));
}, []);
return (
<div className="app">
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</div>
);
}
export default App;
Detta exempel visar en funktionell React-komponent, kallad “App”-komponenten, som använder “useEffect”-kroken för att hämta data från ett externt API. Effekthanteraren som är associerad med “useEffect”-kroken hämtar exempelinformation från JSONPlaceholder API, bearbetar JSON-svaret och uppdaterar därefter “data”-tillståndet med de erhållna uppgifterna.
Med hänsyn till den aktuella statusen för vår applikations data visar appen titelattributet som är associerat med varje respektive objekt inom denna information.
Egenskaper för useEffect Hook
Programmet är utformat med asynkron drift i åtanke och innehåller denna funktionalitet inbyggt, vilket resulterar i en sömlös upplevelse när du hämtar data.
Användningen av useEffect kroken är schemalagd att ske efter slutförandet av renderingsprocessen för en given komponent, vilket garanterar att kroken inte hindrar eller försvårar användargränssnittet under denna period.
Direktivet erbjuder en förenklad metod för att utföra rensningsuppgifter genom att tillhandahålla en funktion som automatiskt anropas när en lyssnare eller prenumeration avslutas. En sådan funktion kan vara särskilt fördelaktig i situationer där effektiv stängning och frigörande av resurser är av största vikt, t.ex. i fall som involverar lyssnare eller prenumerationer.
UseLayoutEffect-kroken
Användningen av useLayoutEffect -kroken speglar nära funktionaliteten hos useEffect -kroken; den fungerar dock synkront efter alla DOM-ändringar. Följaktligen utförs denna funktion innan webbläsaren kan återge den visuella representationen på skärmen, vilket gör den mycket fördelaktig för företag som kräver exakt manipulation av DOM-strukturen (Document Object Model) och stylingattribut, inklusive men inte begränsat till att bestämma dimensionerna för ett visst element, justera dimensionerna för ett element eller orkestrera det rumsliga arrangemanget av nämnda element genom animeringstekniker.
Med hjälp av kroken useLayoutEffect kan man ändra dimensionerna på en knappkomponent enligt nedanstående exempel:
import React from "react";
function App() {
const button = React.useRef();
React.useLayoutEffect(() => {
const { width } = button.current.getBoundingClientRect();
button.current.style.width = `${width \\+ 12}px`;
}, []);
return (
<div className="app">
<button ref={button}>Click Me</button>
</div>
);
}
export default App;
Ovanstående kodavsnitt expanderar knappkomponentens dimensioner med tolv enheter med hjälp av useLayoutEffect funktionellt verktyg. Följaktligen garanterar denna konfiguration att den justerade bredden tillämpas på knappen innan den visas visuellt på användarens displayenhet.
Egenskaper för useLayoutEffect Hook
Den synkrona exekveringen av JavaScript-kod säkerställer att åtgärden sker sekventiellt utan något avbrott i användargränssnittet. Detta tillvägagångssätt kan dock leda till fördröjning eller blockering av användargränssnittet på grund av att vissa operationer är tidskrävande.
DOM Read/Write-operationen är idealisk för omedelbar åtkomst till Document Object Model för både läsning och skrivning av data, särskilt när det är viktigt att snabbt kunna observera ändringar innan webbläsaren målar om.
useEffectEvent-kroken
Användningen av useEffectEvent -kroken utgör en effektiv lösning på de utmanande beroendeproblem som finns i den konventionella useEffect -kroken. De som är väl insatta i hur useEffect fungerar, kan komma att få kämpa med de komplicerade beroendeförhållandena, som ibland gör det nödvändigt att inkludera element utöver vad som är absolut nödvändigt för en korrekt funktion.
Exempel:
import React from "react";
function App() {
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>;
}
export default App;
Den här koden visar hur
useEffect fungerar genom att anropa metoden connect och skapa en asynkron “onConnected” callback-funktion som körs när “onConnected”-händelsen utlöses av enheten. Därefter utför denna callback en loggåtgärd som genererar ett anslutningsmeddelande. Dessutom tillhandahåller den en avvecklingsfunktion som träder i kraft när komponenten demonteras och därmed tar på sig ansvaret för att bryta anslutningen till enheten.
DependencyArray innehåller både URL:en och en händelsehanterare som kallas “onConnected”. Varje gång App-komponenten renderas genereras den här funktionen dynamiskt. Följaktligen genomgår React hook, “useEffect”, en iterativ process där dess primära mål är att upprepade gånger uppdatera appkomponentens tillstånd.
En av de effektiva metoderna för att hantera problemet med useEffect-loopen är att använda useEffectEvent-kroken, vilket möjliggör en strömlinjeformad lösning utan att belasta beroendematrisen med ytterligare obefogade värden.
import React from "react";
function App() {
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>;
}
export default App;
Genom att använda useEffectEvent kroken för att slå in onConnected funktionen, säkerställer vi att meddelande och loginOptions parametrarna alltid är uppdaterade när de skickas till useEffect kroken. Följaktligen är den senare inte längre beroende av den förra eller några parametrar som levereras till den.
Vid användning av kroken useEffect kan det vara fördelaktigt att förlita sig på ett visst värde för att utlösa effekten, trots att effekten kräver ytterligare värden som kanske inte är önskvärda som beroenden inom useEffect .
Egenskaper hos useEffectEvent Hook
Systemet utmärker sig i hanteringen av händelseutlösta konsekvenser.
Användningen av kroken useEffect är inte kompatibel med händelsehanteringsfunktioner som onClick , onChange och så vidare, eftersom dessa händelser utlöses av användarinteraktioner snarare än reaktiva beroenden som kan övervakas för förändringar av React.
useEffect hook, ett kraftfullt och mångsidigt verktyg för att hantera biverkningar i funktionella komponenter, är fortfarande en experimentell funktion från och med React-versioner upp till 18. Det bör noteras att tillgängligheten kan variera mellan olika versioner eller builds av React.
När ska man använda vilken krok?
Var och en av dessa datahämtningskrokar har sin egen unika tillämplighet, beroende på specifika omständigheter.
Att använda kroken useEffect i React är en lämplig lösning för att hämta och uppdatera data inom en komponent, eftersom det möjliggör effektiv hantering av asynkrona operationer samtidigt som en ren och organiserad kodbas bibehålls.
När det är nödvändigt att utföra direkta ändringar i Document Object Model (DOM) på ett sätt som kräver omedelbar rendering av ändringarna, skulle det vara lämpligt att använda useLayoutEffect . Denna funktion möjliggör effektiv hantering av sådana uppgifter genom att säkerställa att de angivna åtgärderna utförs efter den första renderingen och innan några efterföljande uppdateringar eller återflöden inträffar.
Att använda useEffect -kroken för lättviktsoperationer utgör inget hot om att hindra användargränssnittet, vilket gör det möjligt att utföra dem enkelt och bekvämt.
Användningen av händelsestyrda sidoeffekter kan uppnås genom att använda både useEffectEvent kroken för att fånga och hantera händelser, samt useEffect kroken för att utföra alla nödvändiga sidoeffekter som svar på dessa händelser.
Hantera sidoeffekter effektivt
Användningen av React-krokar avslöjar ett omfattande utbud av möjligheter, och att förstå skillnaden mellan useEffect, useLayoutEffect och useEffectEvent-krokarna kan väsentligt påverka hur man hanterar sidoeffekter och DOM-manipulation. Det är absolut nödvändigt att ta hänsyn till dessa krokars särskilda förutsättningar och konsekvenser för att kunna konstruera användarcentrerade program.