UseEffect, useLayoutEffect en useEffectEvent: een vergelijking van haken voor het ophalen van gegevens in React

React-hooks zijn een krachtige manier om bijwerkingen in React-componenten te beheersen. Drie van de meest voorkomende haken voor het omgaan met bijwerkingen zijn useEffect, useLayoutEffect en useEffectEvent. Elke haak heeft zijn unieke gebruiksscenario, dus het kiezen van de juiste haak voor de klus is essentieel.

De useEffect-hook

De gebruikEffect haak is een fundamentele haak in React waarmee u bijwerkingen kunt uitvoeren, zoals DOM-manipulatie, asynchrone bewerkingen en gegevens ophalen in functionele componenten. Deze hook is een functie waaraan twee argumenten moeten doorgegeven worden: de effectfunctie en de dependency-array.

De effectfunctie bevat de code die het neveneffect uitvoert, en de afhankelijkheidsarray bepaalt wanneer de effectfunctie wordt uitgevoerd. Als de afhankelijkheidsmatrix leeg is, wordt de effectfunctie slechts één keer uitgevoerd bij de eerste weergave van de component. Anders wordt de effectfunctie uitgevoerd wanneer een van de waarden in de afhankelijkheidsmatrix verandert.

Hier is een voorbeeld van hoe je de useEffect hook gebruikt om gegevens op te halen:

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;

Deze code demonstreert een App component die gegevens ophaalt van een externe API met behulp van de useEffect-hook. De effectfunctie van useEffect haalt voorbeeldgegevens op uit de JSONPlaceholder API. Vervolgens wordt het JSON-antwoord geparseerd en worden de opgehaalde gegevens ingesteld op de gegevens staat.

Met de gegevensstatus geeft de app-component de titel eigendom van elk item in de staat.

Kenmerken van het gebruikEffect Hook

• Asynchroon vriendelijk: Het ondersteunt native asynchrone bewerkingen, waardoor het handig is om gegevens op te halen.
• Wordt uitgevoerd na weergave: De useEffect-hook voert zijn effecten uit nadat de toepassing de component heeft weergegeven, zodat de hook de gebruikersinterface niet blokkeert.
• Opruimen: Het biedt een geïntegreerde manier om op te ruimen door een functie te retourneren. Dit kan vooral handig zijn als u met luisteraars of abonnementen werkt.

De useLayoutEffect-hook

De gebruikLayoutEffect haak is vergelijkbaar met de gebruikEffect hook maar loopt synchroon na alle DOM-mutaties. Dit betekent dat het wordt uitgevoerd voordat de browser het scherm kan schilderen, waardoor het geschikt is voor taken die precisie vereisen controle over de DOM-indeling en -stijlen, zoals het meten van de grootte van een element, het wijzigen van de grootte van een element of het animeren ervan positie.

Hieronder ziet u een voorbeeld van hoe u de useLayoutEffect-hook gebruikt om de breedte van a te wijzigen knop 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;

Het bovenstaande codeblok vergroot de breedte van het knopelement met 12 pixels met behulp van de useLayoutEffect-hook. Dit zorgt ervoor dat de knopbreedte groter wordt voordat de knop op uw scherm verschijnt.

Kenmerken van de useLayoutEffect Hook

• Synchronisch: Het wordt synchroon uitgevoerd en blokkeert mogelijk de gebruikersinterface als de bewerking daarin zwaar is.
• DOM-lezen/schrijven: Het is het meest geschikt om rechtstreeks naar de DOM te lezen en te schrijven, vooral als u de wijzigingen nodig heeft voordat de browser opnieuw wordt geschilderd.

De useEffectEvent-haak

De gebruikEffectEvent hook is een React hook die de afhankelijkheidsproblemen van de gebruikEffect haak. Als u bekend bent met useEffect, weet u dat de afhankelijkheidsmatrix lastig kan zijn. Soms moet u meer waarden in de afhankelijkheidsmatrix plaatsen die strikt noodzakelijk zijn.

Bijvoorbeeld:

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;

Deze code demonstreert de App component die een verbinding met een externe dienst beheert. De aansluiten functie maakt verbinding met een opgegeven URL, terwijl de logVerbinding functie registreert de verbindingsdetails. Tenslotte de opVerbonden functie roept de logVerbinding functie om een ​​bericht over een succesvolle verbinding te registreren wanneer het apparaat verbinding maakt.

De useEffect-hook roept de connect-functie aan en stelt vervolgens een onConnected callback-functie in om uit te voeren wanneer de apparaat activeert de onConnected-gebeurtenis. Deze callback registreert een verbindingsbericht. Het retourneert een opschoonfunctie die wordt geactiveerd wanneer het onderdeel wordt ontkoppeld. Deze opruimfunctie is verantwoordelijk voor het loskoppelen van het apparaat.

De afhankelijkheidsarray heeft de URL variabele en de opVerbonden functie. De app-component maakt bij elke weergave de onConnected-functie. Hierdoor wordt de functie useEffect in een lus uitgevoerd, waardoor de app-component opnieuw wordt weergegeven.

Er zijn meerdere manieren om het useEffect-lusprobleem op te lossen. Toch is de meest efficiënte manier om dit te doen zonder nog meer onnodige waarden toe te voegen aan uw afhankelijkheidsarray de useEffectEvent-hook.

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;

Door de onConnected-functie te omwikkelen met de useEffectEvent-haak, kan de useEffectEvent-haak altijd de nieuwste waarden van de bericht En loginOpties parameters voordat u deze doorgeeft aan de useEffect-hook. Dit betekent dat het useEffect niet afhankelijk hoeft te zijn van de onConnected-functie of de waarden die eraan worden doorgegeven.

De hook useEffectEvent is handig als u wilt dat uw useEffect afhankelijk is van een specifieke waarde, ook al is de effect activeert een gebeurtenis waarvoor andere waarden nodig zijn die u liever niet gebruikt als afhankelijkheden in de gebruikEffect.

Kenmerken van de useEffectEvent-haak

• Het is het meest geschikt voor door gebeurtenissen veroorzaakte bijwerkingen.
• De gebruikEffectEvent hook werkt niet met gebeurtenishandlers zoals bij klikken, opWijzigen, enz.

De useEffectEvent-hook is nog steeds experimenteel en niet beschikbaar in React versie 18 haken.

Wanneer gebruik je welke haak?

Elk van de bovenstaande haken voor het ophalen van gegevens is geschikt voor verschillende situaties:

• Data ophalen: Het useEffect is een uitstekende keuze.
• Directe DOM-manipulaties: Als u synchrone wijzigingen in de DOM moet aanbrengen voordat u opnieuw tekent, kiest u voor useLayoutEffect.
• Lichtgewicht operaties: Voor bewerkingen waarbij het risico niet bestaat dat de gebruikersinterface wordt geblokkeerd, kunt u gratis useEffect gebruiken.
• Door gebeurtenissen veroorzaakte bijwerkingen: Gebruik de hook useEffectEvent om de gebeurtenissen in te pakken en de hook useEffect om de bijwerkingen uit te voeren.

Ga efficiënt om met bijwerkingen

De React-haken openen een wereld van mogelijkheden en begrijpen het verschil tussen het gebruikseffect, useLayoutEffect en useEffectEvent hooks kunnen een aanzienlijke invloed hebben op de manier waarop u omgaat met bijwerkingen en DOM manipulatie. Het is essentieel om rekening te houden met de specifieke vereisten en implicaties van deze hooks om gebruiksvriendelijke applicaties te maken.