UseEffect, useLayoutEffect und useEffectEvent: Ein Vergleich der Datenabruf-Hooks in React

React-Hooks sind eine leistungsstarke Möglichkeit, Nebenwirkungen in React-Komponenten zu verwalten. Drei der häufigsten Hooks zur Behandlung von Nebenwirkungen sind useEffect, useLayoutEffect und useEffectEvent. Jeder Haken hat seinen eigenen Anwendungsfall, daher ist die Auswahl des richtigen Hakens für die jeweilige Aufgabe von entscheidender Bedeutung.

Der useEffect-Hook

Der useEffect Haken ist ein grundlegender Haken in React Dadurch können Sie Nebeneffekte wie DOM-Manipulation, asynchrone Vorgänge usw. ausführen Datenabruf in Funktionskomponenten. Dieser Hook ist eine Funktion, die zwei Argumente akzeptiert, die Effektfunktion und das Abhängigkeitsarray.

Die Effektfunktion enthält den Code, der den Nebeneffekt ausführt, und das Abhängigkeitsarray bestimmt, wann die Effektfunktion ausgeführt wird. Wenn das Abhängigkeitsarray leer ist, wird die Effektfunktion beim ersten Rendern der Komponente nur einmal ausgeführt. Andernfalls wird die Effektfunktion immer dann ausgeführt, wenn sich einer der Werte im Abhängigkeitsarray ändert.

Hier ist ein Beispiel für die Verwendung des useEffect-Hooks zum Abrufen von Daten:

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;

Dieser Code demonstriert eine App Komponente, die mithilfe des useEffect-Hooks Daten von einer externen API abruft. Die Effektfunktion von useEffect ruft Beispieldaten von der JSONPlaceholder-API ab. Anschließend analysiert es die JSON-Antwort und setzt die abgerufenen Daten auf die Daten Zustand.

Mit dem Datenstatus rendert die App-Komponente die Titel Eigentum jedes Gegenstands im Staat.

Eigenschaften des useEffect Hooks

• Asynchronfreundlich: Es unterstützt nativ asynchrone Vorgänge und erleichtert so den Datenabruf.
• Wird nach dem Rendern ausgeführt: Der useEffect-Hook führt seine Effekte aus, nachdem die Anwendung die Komponente gerendert hat, und stellt so sicher, dass der Hook die Benutzeroberfläche nicht blockiert.
• Aufräumen: Es bietet eine integrierte Möglichkeit zur Bereinigung durch Rückgabe einer Funktion. Dies kann besonders nützlich sein, wenn Sie mit Zuhörern oder Abonnements arbeiten.

Der useLayoutEffect-Hook

Der useLayoutEffect Haken ähnelt dem useEffect Hook, läuft aber nach allen DOM-Mutationen synchron. Dies bedeutet, dass es ausgeführt wird, bevor der Browser den Bildschirm zeichnen kann, wodurch es für Aufgaben geeignet ist, die Präzision erfordern Kontrolle über das DOM-Layout und die Stile, z. B. Messen der Größe eines Elements, Ändern der Größe eines Elements oder Animieren desselben Position.

Unten finden Sie ein Beispiel für die Verwendung des useLayoutEffect-Hooks zum Ändern der Breite von a Taste 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;

Der obige Codeblock erhöht die Breite des Schaltflächenelements mithilfe des useLayoutEffect-Hooks um 12 Pixel. Dadurch wird sichergestellt, dass die Schaltflächenbreite zunimmt, bevor die Schaltfläche auf Ihrem Bildschirm angezeigt wird.

Eigenschaften des useLayoutEffect-Hooks

• Synchron: Es wird synchron ausgeführt und blockiert möglicherweise die Benutzeroberfläche, wenn der darin enthaltene Vorgang umfangreich ist.
• DOM lesen/schreiben: Es eignet sich am besten zum Lesen und Schreiben direkt in das DOM, insbesondere wenn Sie die Änderungen benötigen, bevor der Browser neu zeichnet.

Der useEffectEvent-Hook

Der useEffectEvent Hook ist ein React-Hook, der die Abhängigkeitsprobleme von löst useEffect Haken. Wenn Sie mit useEffect vertraut sind, wissen Sie, dass das Abhängigkeitsarray schwierig sein kann. Manchmal müssen Sie mehr Werte in das Abhängigkeitsarray einfügen, als unbedingt erforderlich sind.

Zum Beispiel:

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;

Dieser Code demonstriert das App Komponente, die eine Verbindung zu einem externen Dienst verwaltet. Der verbinden Die Funktion stellt eine Verbindung zu einer angegebenen URL her, während die logConnection Die Funktion protokolliert die Verbindungsdetails. Zuletzt die onConnected Funktion ruft die auf logConnection Funktion zum Protokollieren einer erfolgreichen Verbindungsmeldung, wenn das Gerät eine Verbindung herstellt.

Der useEffect-Hook ruft die Connect-Funktion auf und richtet dann eine onConnected-Rückruffunktion ein, die ausgeführt wird, wenn die Gerät löst das onConnected-Ereignis aus. Dieser Rückruf protokolliert eine Verbindungsnachricht. Es gibt eine Bereinigungsfunktion zurück, die aktiviert wird, wenn die Bereitstellung der Komponente aufgehoben wird. Diese Bereinigungsfunktion ist für die Trennung des Geräts verantwortlich.

Das Abhängigkeitsarray hat die URL Variable und die onConnected Funktion. Die App-Komponente erstellt bei jedem Rendern die Funktion onConnected. Dadurch wird die Funktion „useEffect“ in einer Schleife ausgeführt, wodurch die App-Komponente weiterhin neu gerendert wird.

Es gibt mehrere Möglichkeiten, das useEffect-Schleifenproblem zu lösen. Der effizienteste Weg, dies zu tun, ohne Ihrem Abhängigkeitsarray weitere unnötige Werte hinzuzufügen, ist jedoch der Hook useEffectEvent.

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;

Durch Umschließen der onConnected-Funktion mit dem useEffectEvent-Hook kann der useEffectEvent-Hook immer die neuesten Werte von lesen Nachricht Und loginOptions Parameter, bevor Sie sie an den useEffect-Hook übergeben. Dies bedeutet, dass sich useEffect nicht auf die Funktion onConnected oder die ihr übergebenen Werte verlassen muss.

Der useEffectEvent-Hook ist nützlich, wenn Sie möchten, dass Ihr useEffect von einem bestimmten Wert abhängt, auch wenn der Der Effekt löst ein Ereignis aus, das andere Werte erfordert, die Sie nicht als Abhängigkeiten im verwenden möchten useEffect.

Eigenschaften des useEffectEvent-Hooks

• Es eignet sich am besten für ereignisbedingte Nebenwirkungen.
• Der useEffectEvent Hook funktioniert nicht mit Event-Handlern wie onClick, bei Änderung, usw.

Der useEffectEvent-Hook ist noch experimentell und in nicht verfügbar Reagieren Sie auf Haken der Version 18.

Wann sollte welcher Haken verwendet werden?

Jeder der oben genannten Datenabruf-Hooks eignet sich für unterschiedliche Situationen:

• Daten abrufen: Der useEffect ist eine ausgezeichnete Wahl.
• Direkte DOM-Manipulationen: Wenn Sie vor einem Repaint synchrone Änderungen am DOM vornehmen müssen, entscheiden Sie sich für useLayoutEffect.
• Leichte Operationen: Für Vorgänge, bei denen nicht das Risiko einer Blockierung der Benutzeroberfläche besteht, können Sie useEffect frei verwenden.
• Ereignisbedingte Nebenwirkungen: Verwenden Sie den Hook „useEffectEvent“, um die Ereignisse einzuschließen, und den Hook „useEffect“, um die Nebenwirkungen auszuführen.

Behandeln Sie Nebenwirkungen effizient

Die React-Hooks eröffnen eine Welt voller Möglichkeiten und das Verständnis des Unterschieds zwischen useEffect, useLayoutEffect- und useEffectEvent-Hooks können erheblichen Einfluss darauf haben, wie Sie mit Nebenwirkungen und DOM umgehen Manipulation. Es ist wichtig, die spezifischen Anforderungen und Auswirkungen dieser Hooks zu berücksichtigen, um benutzerfreundliche Anwendungen zu erstellen.