UseEffect, useLayoutEffect a useEffectEvent: Porovnanie hákov na získavanie údajov v React

Háky React sú účinným spôsobom, ako spravovať vedľajšie účinky v komponentoch React. Tri z najbežnejších háčikov na zvládnutie vedľajších účinkov sú useEffect, useLayoutEffect a useEffectEvent. Každý hák má svoj jedinečný prípad použitia, takže výber toho správneho pre danú prácu je nevyhnutný.

Hák useEffect

The useEffect hák je a základný háčik v Reacte ktorý vám umožňuje vykonávať vedľajšie efekty, ako je manipulácia s DOM, asynchrónne operácie a získavanie údajov vo funkčných komponentoch. Tento hák je funkcia, ktorá má dva argumenty, funkciu efektu a pole závislostí.

Funkcia efektu obsahuje kód, ktorý vykonáva vedľajší efekt, a pole závislostí určuje, kedy sa funkcia efektu spustí. Ak je pole závislostí prázdne, funkcia efektu sa spustí iba raz pri počiatočnom vykreslení komponentu. V opačnom prípade sa funkcia efektu spustí vždy, keď sa zmení niektorá z hodnôt v poli závislostí.

Tu je príklad, ako použiť háčik useEffect na načítanie údajov:

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 demonštruje an App komponent, ktorý načítava údaje z externého API pomocou háku useEffect. Funkcia efektu useEffect načíta vzorové údaje z JSONPlaceholder API. Potom analyzuje odpoveď JSON a nastaví získané údaje na údajov štát.

So stavom údajov komponent App vykresľuje titul majetku každej položky v štáte.

Charakteristika použitiaEffect Hook

• Asynchrónne priateľské: Natívne podporuje asynchrónne operácie, vďaka čomu je vhodný na načítanie údajov.
• Spustí sa po vykreslení: Hák useEffect spustí svoje efekty po tom, čo aplikácia vykreslí komponent, čím sa zabezpečí, že hák neblokuje používateľské rozhranie.
• Vyčistiť: Poskytuje integrovaný spôsob vykonania čistenia vrátením funkcie. To môže byť užitočné najmä pri práci s poslucháčmi alebo odbermi.

Hák useLayoutEffect

The useLayoutEffect háčik je podobný useEffect hook, ale beží synchrónne po všetkých mutáciách DOM. To znamená, že sa spustí skôr, ako prehliadač môže vymaľovať obrazovku, takže je vhodný pre úlohy, ktoré vyžadujú presné kontrolu nad rozložením a štýlmi modelu DOM, ako je meranie veľkosti prvku, zmena veľkosti prvku alebo animácia jeho pozíciu.

Nižšie je uvedený príklad, ako použiť háčik useLayoutEffect na zmenu šírky a tlačidlo 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;

Blok kódu vyššie zväčší šírku prvku tlačidla o 12 pixelov pomocou háku useLayoutEffect. Tým sa zabezpečí, že sa šírka tlačidla zväčší predtým, ako sa tlačidlo zobrazí na obrazovke.

Charakteristika použitia LayoutEffect Hook

• Synchrónne: Vykonáva sa synchrónne a potenciálne blokuje používateľské rozhranie, ak je operácia v ňom náročná.
• Čítanie/zápis DOM: Najlepšie sa hodí na čítanie a zápis priamo do DOM, najmä ak potrebujete zmeny pred prekreslením prehliadača.

Háčik useEffectEvent

The useEffectEvent hook je hák React, ktorý rieši problémy so závislosťami useEffect háčik. Ak poznáte useEffect, viete, že jeho pole závislostí môže byť zložité. Niekedy musíte do poľa závislostí vložiť viac hodnôt, ktoré sú nevyhnutne potrebné.

Naprí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 demonštruje App komponent, ktorý riadi pripojenie k externej službe. The pripojiť funkcia sa pripája k zadanej URL, zatiaľ čo logConnection funkcia zaznamenáva podrobnosti o pripojení. Nakoniec, onConnected funkcia volá logConnection funkcia na zaznamenanie správy o úspešnom pripojení, keď sa zariadenie pripojí.

Hák useEffect zavolá funkciu connect a potom nastaví funkciu spätného volania onConnected, ktorá sa spustí, keď sa spustí zariadenie spúšťa udalosť onConnected. Toto spätné volanie zaznamená správu o pripojení. Vracia funkciu čistenia, ktorá sa aktivuje, keď sa komponent odpojí. Táto funkcia čistenia je zodpovedná za odpojenie zariadenia.

Pole závislostí má url premenná a onConnected funkciu. Komponent App vytvorí funkciu onConnected pri každom vykreslení. To spôsobí, že funkcia useEffect sa spustí v slučke, ktorá bude pokračovať v opätovnom vykresľovaní komponentu aplikácie.

Existuje niekoľko spôsobov, ako vyriešiť problém slučky useEffect. Najúčinnejším spôsobom, ako to urobiť bez pridávania ďalších nepotrebných hodnôt do poľa závislostí, je háčik 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 funkcie onConnected do háku useEffectEvent môže háčik useEffectEvent vždy čítať najnovšie hodnoty správu a prihlasovacie možnosti parametre pred jeho odovzdaním do háku useEffect. To znamená, že useEffect sa nemusí spoliehať na funkciu onConnected ani na hodnoty, ktoré sú jej odovzdané.

Háčik useEffectEvent je užitočný, keď chcete, aby váš useEffect závisel od konkrétnej hodnoty, aj keď efekt spustí udalosť, ktorá vyžaduje iné hodnoty, ktoré nechcete použiť ako závislosti v useEffect.

Charakteristika použitiaEffectEvent Hook

• Najlepšie sa hodí pre vedľajšie účinky vyvolané udalosťami.
• The useEffectEvent hook nefunguje s obsluhou udalostí, ako je po kliknutí, pri zmene, atď.

Hák useEffectEvent je stále experimentálny a nie je k dispozícii v React verzia 18 háčikov.

Kedy použiť ktorý hák?

Každý z vyššie uvedených háčikov na načítanie údajov je vhodný pre rôzne situácie:

• Načítavajú sa údaje: UseEffect je vynikajúcou voľbou.
• Priame DOM manipulácie: Ak potrebujete vykonať synchrónne zmeny v DOM pred prekreslením, rozhodnite sa pre useLayoutEffect.
• Ľahké operácie: Pre operácie, pri ktorých nehrozí zablokovanie používateľského rozhrania, môžete voľne použiť useEffect.
• Vedľajšie účinky vyvolané udalosťami: Použite háčik useEffectEvent na zabalenie udalostí a háčik useEffect na spustenie vedľajších efektov.

Efektívne zvládajte vedľajšie účinky

Háčiky React otvárajú svet možností a pochopenie rozdielu medzi useEffect, Háčiky useLayoutEffect a useEffectEvent môžu výrazne ovplyvniť spôsob, akým zvládate vedľajšie efekty a DOM manipulácia. Je nevyhnutné zvážiť špecifické požiadavky a dôsledky týchto háčikov, aby boli aplikácie užívateľsky prívetivé.