UseEffect, useLayoutEffect in useEffectEvent: Primerjava kavljev za pridobivanje podatkov v Reactu

Kavlji React so močan način za upravljanje stranskih učinkov v komponentah React. Trije najpogostejši kavlji za obravnavanje stranskih učinkov so useEffect, useLayoutEffect in useEffectEvent. Vsaka kljuka ima svoj edinstven primer uporabe, zato je izbira pravega ključnega pomena za delo.

UseEffect Hook

The useEffect kavelj je a temeljni kavelj v Reactu ki vam omogoča izvajanje stranskih učinkov, kot so manipulacija DOM, asinhrone operacije in pridobivanje podatkov v funkcionalnih komponentah. Ta kavelj je funkcija, ki sprejme dva argumenta, funkcijo učinka in matriko odvisnosti.

Funkcija učinka vsebuje kodo, ki izvaja stranski učinek, matrika odvisnosti pa določa, kdaj se izvaja funkcija učinka. Če je niz odvisnosti prazen, se funkcija učinka zažene samo enkrat pri začetnem upodabljanju komponente. V nasprotnem primeru se funkcija učinka zažene vsakič, ko se spremeni katera koli od vrednosti v nizu odvisnosti.

Tukaj je primer, kako uporabiti kljuko useEffect za pridobivanje podatkov:

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;

Ta koda prikazuje aplikacija komponenta, ki pridobi podatke iz zunanjega API-ja s pomočjo kljuke useEffect. Funkcija učinka useEffect pridobi vzorčne podatke iz API-ja JSONPlaceholder. Nato razčleni odgovor JSON in nastavi pridobljene podatke na podatke država.

S stanjem podatkov komponenta aplikacije upodablja naslov lastnina vsakega predmeta v državi.

Značilnosti uporabe Effect Hook

• Asinhrono prijazno: Izvorno podpira asinhrone operacije, zaradi česar je priročen za pridobivanje podatkov.
• Zažene se po upodabljanju: Kavelj useEffect izvede svoje učinke, potem ko aplikacija upodobi komponento, s čimer zagotovi, da kavelj ne blokira uporabniškega vmesnika.
• Pospravi: Zagotavlja integriran način izvajanja čiščenja z vrnitvijo funkcije. To je lahko še posebej koristno pri delu s poslušalci ali naročninami.

Kavelj useLayoutEffect

The useLayoutEffect kavelj je podoben useEffect hook, vendar teče sinhrono po vseh mutacijah DOM. To pomeni, da se zažene, preden lahko brskalnik pobarva zaslon, zaradi česar je primeren za naloge, ki zahtevajo natančnost nadzor nad postavitvijo in slogi DOM, kot je merjenje velikosti elementa, spreminjanje velikosti elementa ali animiranje položaj.

Spodaj je primer, kako uporabiti kljuko useLayoutEffect za spreminjanje širine a gumb 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;

Zgornji blok kode poveča širino elementa gumba za 12 slikovnih pik z uporabo kljuke useLayoutEffect. To zagotavlja, da se širina gumba poveča, preden se gumb prikaže na zaslonu.

Značilnosti useLayoutEffect Hook

• Sinhrono: Izvaja se sinhrono in lahko blokira uporabniški vmesnik, če je operacija v njem težka.
• DOM branje/pisanje: Najbolj primeren je za branje in pisanje neposredno v DOM, še posebej, če potrebujete spremembe, preden se brskalnik znova pobarva.

Kavelj useEffectEvent

The useEffectEvent hook je kavelj React, ki rešuje težave z odvisnostmi useEffect kavelj. Če poznate useEffect, veste, da je njegova matrika odvisnosti lahko težavna. Včasih morate v matriko odvisnosti vnesti več vrednosti, ki so nujno potrebne.

Na primer:

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;

Ta koda prikazuje aplikacija komponenta, ki upravlja povezavo z zunanjo storitvijo. The povezati funkcija se poveže z določenim URL-jem, medtem ko se logConnection funkcija beleži podrobnosti povezave. Nazadnje, onConnected funkcija pokliče logConnection funkcijo za beleženje sporočila o uspešni povezavi, ko se naprava poveže.

Kavelj useEffect pokliče funkcijo povezovanja, nato pa nastavi funkcijo povratnega klica onConnected, ki se izvede, ko napravo sproži dogodek onConnected. Ta povratni klic beleži sporočilo o povezavi. Vrne funkcijo čiščenja, ki se aktivira, ko se komponenta odklopi. Ta funkcija čiščenja je odgovorna za odklop naprave.

Matrika odvisnosti ima url spremenljivka in onConnected funkcijo. Komponenta aplikacije bo ustvarila funkcijo onConnected pri vsakem upodabljanju. To bo povzročilo, da se bo funkcija useEffect izvajala v zanki, ki bo nadaljevala s ponovnim upodabljanjem komponente aplikacije.

Obstaja več načinov za rešitev težave z zanko useEffect. Kljub temu je najučinkovitejši način, da to storite brez dodajanja več nepotrebnih vrednosti v niz odvisnosti, s kavljem 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;

Če funkcijo onConnected ovijete s kavljem useEffectEvent, lahko kavelj useEffectEvent vedno prebere najnovejše vrednosti sporočilo in loginOptions parametre, preden ga posredujete kljuki useEffect. To pomeni, da se useEffectu ni treba zanašati na funkcijo onConnected ali vrednosti, ki so ji bile posredovane.

Kavelj useEffectEvent je uporaben, če želite, da je vaš useEffect odvisen od določene vrednosti, čeprav učinek sproži dogodek, ki zahteva druge vrednosti, ki jih ne želite uporabiti kot odvisnosti v useEffect.

Značilnosti useEffectEvent Hook

• Najbolj primeren je za stranske učinke, ki jih povzročijo dogodki.
• The useEffectEvent hook ne deluje z obdelovalci dogodkov, kot je onClick, onChangeitd.

Kavelj useEffectEvent je še vedno eksperimentalen in ni na voljo v Kavlji različice React 18.

Kdaj uporabiti kateri kavelj?

Vsaka od zgornjih kavljev za pridobivanje podatkov je primerna za različne situacije:

• Pridobivanje podatkov: useEffect je odlična izbira.
• Neposredne manipulacije DOM: Če morate sinhrono spremeniti DOM pred ponovnim barvanjem, se odločite za useLayoutEffect.
• Lahke operacije: Za operacije, pri katerih ni nevarnosti blokiranja uporabniškega vmesnika, lahko prosto uporabite useEffect.
• Stranski učinki, ki jih poganjajo dogodki: Uporabite kavelj useEffectEvent za zavijanje dogodkov in kavelj useEffect za zagon stranskih učinkov.

Učinkovito ravnajte s stranskimi učinki

Kavlji React odpirajo svet možnosti in razumevanje razlike med useEffect, Kavlji useLayoutEffect in useEffectEvent lahko znatno vplivajo na to, kako obravnavate stranske učinke in DOM manipulacija. Za izdelavo uporabniku prijaznih aplikacij je bistveno upoštevati posebne zahteve in posledice teh kavljev.