UseEffect, useLayoutEffect a useEffectEvent: Porovnání háčků pro načítání dat v Reactu

Háky React jsou účinný způsob, jak spravovat vedlejší efekty v komponentách React. Tři z nejběžnějších háčků pro řešení vedlejších efektů jsou useEffect, useLayoutEffect a useEffectEvent. Každý hák má svůj jedinečný případ použití, takže výběr toho správného pro danou práci je zásadní.

UseEffect Hook

The useEffect hák je a základní háček v Reactu který vám umožňuje provádět vedlejší efekty, jako je manipulace s DOM, asynchronní operace a načítání dat ve funkčních komponentách. Tento hák je funkce, která přebírá dva argumenty, funkci efektu a pole závislostí.

Funkce efektu obsahuje kód, který provádí vedlejší efekt, a pole závislostí určuje, kdy se funkce efektu spustí. Pokud je pole závislostí prázdné, funkce efektu se spustí pouze jednou při počátečním vykreslení komponenty. V opačném případě se funkce efektu spustí vždy, když se některá z hodnot v poli závislostí změní.

Zde je příklad, jak použít háček useEffect k načtení dat:

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;

Tento kód demonstruje an Aplikace komponenta, která načítá data z externího API pomocí háku useEffect. Funkce efektu useEffect načítá ukázková data z rozhraní API JSONPlaceholder. Poté analyzuje odpověď JSON a nastaví získaná data na data Stát.

Se stavem dat komponenta App vykresluje titul majetku každé položky ve státě.

Charakteristika použitíEffect Hook

• Asynchronní přátelský: Nativně podporuje asynchronní operace, takže je vhodný pro načítání dat.
• Spustí se po vykreslení: Hák useEffect spustí své efekty poté, co aplikace vykreslí komponentu, čímž zajistí, že hák neblokuje uživatelské rozhraní.
• Čištění: Poskytuje integrovaný způsob provádění čištění vrácením funkce. To může být užitečné zejména při práci s posluchači nebo odběry.

UseLayoutEffect Hook

The useLayoutEffect háček je podobný useEffect hook, ale běží synchronně po všech mutacích DOM. To znamená, že se spouští dříve, než prohlížeč může nakreslit obrazovku, takže je vhodný pro úkoly, které vyžadují přesnost ovládání rozvržení a stylů DOM, jako je měření velikosti prvku, změna velikosti prvku nebo animace jeho pozice.

Níže je uveden příklad, jak použít háček useLayoutEffect ke změně šířky a knoflík živel:

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;

Blok kódu výše zvětší šířku prvku tlačítka o 12 pixelů pomocí háčku useLayoutEffect. Tím se zajistí, že se šířka tlačítka zvětší, než se tlačítko zobrazí na obrazovce.

Charakteristika háku useLayoutEffect

• Synchronní: Provádí se synchronně a potenciálně blokuje uživatelské rozhraní, pokud je operace v něm obtížná.
• DOM čtení/zápis: Nejlépe se hodí pro čtení a zápis přímo do DOM, zvláště pokud potřebujete změny před překreslením prohlížeče.

UseEffectEvent Hook

The useEffectEvent hook je hák React, který řeší problémy se závislostmi useEffect háček. Pokud znáte useEffect, víte, že jeho pole závislostí může být složité. Někdy musíte do pole závislostí vložit více hodnot, které jsou nezbytně nutné.

Například:

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;

Tento kód demonstruje Aplikace komponenta, která spravuje připojení k externí službě. The připojit funkce se připojuje k zadané URL, zatímco logConnection funkce zaznamená podrobnosti o připojení. Konečně, onPřipojeno funkce volá logConnection funkce pro zaznamenání zprávy o úspěšném připojení, když se zařízení připojí.

Hák useEffect zavolá funkci connect a poté nastaví funkci zpětného volání onConnected, která se spustí, když dojde k přístroj spustí událost onConnected. Toto zpětné volání zaznamená zprávu o připojení. Vrátí funkci čištění, která se aktivuje, když se komponenta odpojí. Tato funkce čištění je zodpovědná za odpojení zařízení.

Pole závislostí má url proměnná a onPřipojeno funkce. Komponenta App vytvoří funkci onConnected při každém renderu. To způsobí, že funkce useEffect poběží ve smyčce, která bude pokračovat v opětovném vykreslování komponenty aplikace.

Problém smyčky useEffect lze vyřešit několika způsoby. Nejúčinnějším způsobem, jak to udělat bez přidávání dalších zbytečných hodnot do pole závislostí, je použití háku 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;

Zabalením funkce onConnected do háku useEffectEvent může háček useEffectEvent vždy číst nejnovější hodnoty zpráva a přihlášeníMožnosti parametry před předáním do háku useEffect. To znamená, že useEffect se nemusí spoléhat na funkci onConnected nebo hodnoty, které jsou jí předány.

Háček useEffectEvent je užitečný, když chcete, aby váš useEffect závisel na konkrétní hodnotě, i když efekt spouští událost, která vyžaduje jiné hodnoty, které nechcete používat jako závislosti v useEffect.

Charakteristika použití EffectEvent Hook

• Nejlépe se hodí pro vedlejší účinky vyvolané událostmi.
• The useEffectEvent hook nefunguje s obsluhou událostí, jako je při kliknutí, při změně, atd.

Hák useEffectEvent je stále experimentální a není dostupný v React verze 18 háčky.

Kdy použít který hák?

Každý z výše uvedených háčků pro načítání dat je vhodný pro různé situace:

• Načítání dat: UseEffect je skvělá volba.
• Přímé DOM manipulace: Pokud potřebujete provést synchronní změny DOM před překreslením, zvolte useLayoutEffect.
• Lehké operace: Pro operace, u kterých nehrozí zablokování uživatelského rozhraní, můžete volně používat useEffect.
• Vedlejší účinky řízené událostmi: Použijte háček useEffectEvent k zabalení událostí a háček useEffect ke spuštění vedlejších efektů.

Efektivní řešení vedlejších účinků

Háčky React otevírají svět možností a pochopení rozdílu mezi useEffect, Háčky useLayoutEffect a useEffectEvent mohou významně ovlivnit způsob, jakým zvládáte vedlejší efekty a DOM manipulace. Je nezbytné vzít v úvahu specifické požadavky a důsledky těchto háků, aby byly uživatelsky přívětivé aplikace.