UseEffect, useLayoutEffect és useEffectEvent: A React adatlekérési kampóinak összehasonlítása

A React horgok hatékony módszert jelentenek a React összetevők mellékhatásainak kezelésére. A mellékhatások kezelésének három leggyakoribb akasztója a useEffect, a useLayoutEffect és a useEffectEvent. Minden horognak megvan a maga egyedi használati esete, ezért elengedhetetlen a munkához megfelelő kiválasztása.

A useEffect Hook

A useEffect horog egy alapvető horog a Reactban amely lehetővé teszi olyan mellékhatások végrehajtását, mint a DOM-manipuláció, aszinkron műveletek és adatlekérés funkcionális komponensekben. Ez a hook egy olyan függvény, amely két argumentumot vesz fel, az effektfüggvényt és a függőségi tömböt.

Az effektus függvény tartalmazza a mellékhatást végrehajtó kódot, a függőségi tömb pedig meghatározza, hogy az effektus függvény mikor futjon. Ha a függőségi tömb üres, az effektus függvény csak egyszer fut le az összetevő kezdeti megjelenítésénél. Ellenkező esetben az effektfüggvény lefut, amikor a függőségi tömb bármely értéke megváltozik.

Íme egy példa a useEffect hook használatára adatok lekérésére:

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;

Ez a kód egy App olyan összetevő, amely adatokat kér le egy külső API-ból a useEffect hook segítségével. A useEffect hatásfüggvénye mintaadatokat kér le a JSONPlaceholder API-ból. Ezután elemzi a JSON-választ, és beállítja a letöltött adatokat a adat állapot.

Az adatállapottal az App komponens megjeleníti a cím az egyes tételek tulajdona az államban.

A használat jellemzőiEffect Hook

• Aszinkron barátságos: Natív módon támogatja az aszinkron műveleteket, így kényelmessé teszi az adatok lekérését.
• Renderelés után fut: A useEffect hook azután hajtja végre a hatásait, hogy az alkalmazás rendereli az összetevőt, biztosítva, hogy a hook ne blokkolja a felhasználói felületet.
• Tisztítás: Integrált módot biztosít a tisztítás végrehajtására egy függvény visszaadásával. Ez különösen akkor lehet hasznos, ha hallgatókkal vagy előfizetésekkel dolgozik.

A useLayoutEffect Hook

A useLayoutEffect horog hasonló a useEffect hook, de az összes DOM-mutáció után szinkronban fut. Ez azt jelenti, hogy még azelőtt lefut, hogy a böngésző lefesthetné a képernyőt, így alkalmassá teszi a pontosságot igénylő feladatok elvégzésére a DOM elrendezés és stílusok vezérlése, például egy elem méretének mérése, egy elem átméretezése vagy animálása pozíció.

Az alábbiakban egy példa látható arra, hogyan lehet a useLayoutEffect hook segítségével módosítani a szélességét gomb elem:

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;

A fenti kódblokk 12 képponttal növeli a gombelem szélességét a useLayoutEffect hook segítségével. Ez biztosítja, hogy a gomb szélessége megnőjön, mielőtt a gomb megjelenik a képernyőn.

A useLayoutEffect Hook jellemzői

• Szinkron: Szinkronban fut, és potenciálisan blokkolja a felhasználói felületet, ha a művelet nehéz.
• DOM olvasás/írás: A legalkalmasabb közvetlenül a DOM-ba való olvasáshoz és íráshoz, különösen akkor, ha a böngésző újrafestése előtt módosítani kell.

A useEffectEvent Hook

A useEffectEvent hook egy React hook, amely megoldja a függőségi problémákat useEffect horog. Ha ismeri a useEffect-et, tudja, hogy a függőségi tömbje bonyolult lehet. Néha több értéket kell megadnia a függőségi tömbben, amelyek feltétlenül szükségesek.

Például:

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;

Ez a kód bemutatja a App komponens, amely egy külső szolgáltatáshoz való kapcsolatot kezel. A csatlakozni függvény egy megadott URL-hez csatlakozik, míg a logConnection függvény naplózza a kapcsolat részleteit. Végül a onConnected függvény meghívja a logConnection funkció a sikeres csatlakozási üzenet naplózásához, amikor az eszköz csatlakozik.

A useEffect hook meghívja a connect funkciót, majd beállít egy onConnected visszahívási funkciót, amely akkor fut le, amikor a eszköz kiváltja az onConnected eseményt. Ez a visszahívás naplózza a kapcsolati üzenetet. Egy tisztítási funkciót ad vissza, amely akkor aktiválódik, amikor az összetevő lecsatlakozik. Ez a tisztítási funkció felelős az eszköz leválasztásáért.

A függőségi tömb rendelkezik a url változó és a onConnected funkció. Az App komponens minden renderelésen létrehozza az onConnected függvényt. Ez azt eredményezi, hogy a useEffect függvény egy cikluson fut, amely folytatja az App komponens újramegjelenítését.

A useEffect hurokprobléma többféleképpen is megoldható. Ennek ellenére a leghatékonyabb módja ennek a useEffectEvent hook használatával anélkül, hogy további felesleges értékeket adna hozzá a függőségi tömbhöz.

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;

Ha az onConnected függvényt a useEffectEvent hookba csomagolja, a useEffectEvent hook mindig beolvassa a üzenet és bejelentkezési beállítások paramétereket, mielőtt átadná a useEffect hook-nak. Ez azt jelenti, hogy a useEffect-nek nem kell az onConnected függvényre vagy a neki átadott értékekre hagyatkoznia.

A useEffectEvent hook akkor hasznos, ha azt szeretné, hogy a useEffect egy adott értéktől függjön, még akkor is, ha a hatás olyan eseményt indít el, amelyhez más értékekre van szükség, amelyeket nem szeretne függőségként használni a useEffect.

A useEffectEvent Hook jellemzői

• Eseményvezérelt mellékhatások esetén a legalkalmasabb.
• A useEffectEvent hook nem működik olyan eseménykezelőkkel, mint pl kattintásra, onChangestb.

A useEffectEvent hook még kísérleti jellegű, és nem érhető el React 18-as verzió horgok.

Mikor melyik horgot használjuk?

A fenti adatlekérési horgok mindegyike különböző helyzetekre alkalmas:

• Adatok behozása: A useEffect kiváló választás.
• Közvetlen DOM-manipulációk: Ha az újrafestés előtt szinkron módosításokat kell végrehajtania a DOM-on, válassza a useLayoutEffect lehetőséget.
• Könnyű műveletek: Az olyan műveleteknél, amelyeknél nem áll fenn a felhasználói felület blokkolásának kockázata, szabadon használhatja a useEffect alkalmazást.
• Eseményvezérelt mellékhatások: Használja a useEffectEvent horgot az események lezárásához és a useEffect horgot a mellékhatások futtatásához.

Hatékonyan kezelje a mellékhatásokat

A React horgok a lehetőségek világát nyitják meg, és megértik a különbséget a useEffect, A useLayoutEffect és a useEffectEvent horgok jelentősen befolyásolhatják a mellékhatások és a DOM kezelését manipuláció. A felhasználóbarát alkalmazások létrehozásához elengedhetetlen ezeknek a horgoknak a speciális követelményeinek és következményeinek figyelembe vétele.