UseEffect, useLayoutEffect i useEffectEvent: Usporedba kuka za dohvaćanje podataka u Reactu

React hookovi su moćan način upravljanja nuspojavama u React komponentama. Tri najčešća kuka za rukovanje nuspojavama su useEffect, useLayoutEffect i useEffectEvent. Svaka kuka ima svoj jedinstveni slučaj upotrebe, stoga je odabir prave za posao ključan.

UseEffect Hook

The useEffect kuka je a temeljna kuka u Reactu koji vam omogućuje izvođenje nuspojava kao što su manipulacija DOM-om, asinkrone operacije i dohvaćanje podataka u funkcionalnim komponentama. Ova kuka je funkcija koja uzima dva argumenta, funkciju učinka i niz ovisnosti.

Funkcija učinka sadrži kod koji izvodi nuspojavu, a niz ovisnosti određuje kada se funkcija učinka pokreće. Ako je niz ovisnosti prazan, funkcija efekta pokreće se samo jednom pri početnom iscrtavanju komponente. U suprotnom, funkcija efekta pokreće se kad god se promijeni bilo koja od vrijednosti u nizu ovisnosti.

Evo primjera kako koristiti kuku useEffect za dohvaćanje podataka:

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;

Ovaj kod pokazuje aplikacija komponenta koja dohvaća podatke iz vanjskog API-ja pomoću kuke useEffect. Funkcija efekta useEffecta dohvaća uzorke podataka iz API-ja JSONPlaceholder. Zatim analizira JSON odgovor i postavlja dohvaćene podatke na podaci država.

Uz stanje podataka, komponenta aplikacije prikazuje titula vlasništvo svake stavke u državi.

Karakteristike useEffect Hooka

• Prijateljski asinkroni: Izvorno podržava asinkrone operacije, što ga čini prikladnim za dohvaćanje podataka.
• Pokreće se nakon renderiranja: kuka useEffect izvršava svoje učinke nakon što aplikacija renderira komponentu, osiguravajući da kuka ne blokira korisničko sučelje.
• Počistiti: Omogućuje integrirani način za izvođenje čišćenja vraćanjem funkcije. Ovo može biti posebno korisno kada radite sa slušateljima ili pretplatama.

Kuka useLayoutEffect

The useLayoutEffect udica je slična useEffect kuka, ali radi sinkrono nakon svih DOM mutacija. To znači da se pokreće prije nego što preglednik može slikati zaslon, što ga čini prikladnim za zadatke koji zahtijevaju preciznost kontrolu nad izgledom i stilovima DOM-a, poput mjerenja veličine elementa, promjene veličine elementa ili njegove animacije položaj.

Ispod je primjer kako koristiti kuku useLayoutEffect za promjenu širine a dugme 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;

Gornji blok koda povećava širinu elementa gumba za 12 piksela pomoću kuke useLayoutEffect. Ovo osigurava da se širina gumba povećava prije nego što se gumb prikaže na vašem zaslonu.

Karakteristike useLayoutEffect kuke

• Sinkroni: Izvršava se sinkrono, potencijalno blokirajući korisničko sučelje ako je radnja unutar njega teška.
• DOM čitanje/pisanje: Najprikladnije je za čitanje i pisanje izravno u DOM, posebno ako su vam potrebne promjene prije nego što se preglednik ponovno slika.

Kuka useEffectEvent

The useEffectEvent hook je React hook koji rješava probleme ovisnosti useEffect kuka. Ako ste upoznati s useEffectom, znate da njegovo polje ovisnosti može biti nezgodno. Ponekad u polje ovisnosti morate staviti više vrijednosti koje su nužno potrebne.

Na primjer:

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;

Ovaj kod pokazuje aplikacija komponenta koja upravlja vezom s vanjskim servisom. The Spojiti povezuje se na određeni URL, dok se logConnection funkcija bilježi detalje veze. Na kraju, onConnected funkcija poziva logConnection funkcija za zapisivanje poruke o uspješnom povezivanju kada se uređaj poveže.

UseEffect kuka poziva funkciju povezivanja, zatim postavlja funkciju povratnog poziva onConnected da se izvrši kada uređaj pokreće događaj onConnected. Ovaj povratni poziv bilježi poruku o povezivanju. Vraća funkciju čišćenja koja se aktivira kada se komponenta demontira. Ova funkcija čišćenja odgovorna je za odspajanje uređaja.

Niz ovisnosti ima url varijabla i onConnected funkcija. Komponenta aplikacije stvorit će funkciju onConnected na svakom prikazu. To će uzrokovati pokretanje funkcije useEffect u petlji, koja će nastaviti ponovno renderirati komponentu aplikacije.

Postoji više načina za rješavanje problema useEffect petlje. Ipak, najučinkovitiji način da to učinite bez dodavanja više nepotrebnih vrijednosti u niz ovisnosti je s kukom 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;

Umotavanjem funkcije onConnected s kukom useEffectEvent, kuka useEffectEvent uvijek može čitati najnovije vrijednosti poruka i loginOptions parametre prije nego što ga proslijedite useEffect kuki. To znači da se useEffect ne mora oslanjati na funkciju onConnected ili vrijednosti koje su joj proslijeđene.

Kuka useEffectEvent korisna je kada želite da vaš useEffect ovisi o određenoj vrijednosti, iako učinak pokreće događaj koji zahtijeva druge vrijednosti koje ne želite koristiti kao ovisnosti u useEffect.

Karakteristike useEffectEvent kuke

• Najprikladniji je za nuspojave uzrokovane događajima.
• The useEffectEvent kuka ne radi s rukovateljima događajima poput na klik, onChangeitd.

UseEffectEvent kuka je još uvijek eksperimentalna i nedostupna u React verzija 18 kuke.

Kada koristiti koju udicu?

Svaki od gornjih kuka za dohvaćanje podataka prikladan je za različite situacije:

• Dohvaćanje podataka: useEffect je izvrstan izbor.
• Izravne manipulacije DOM-om: Ako trebate unijeti sinkrone promjene u DOM prije ponovnog bojenja, odlučite se za useLayoutEffect.
• Lagane operacije: Za operacije koje ne riskiraju blokiranje korisničkog sučelja, možete slobodno koristiti useEffect.
• Nuspojave uzrokovane događajima: Koristite kuku useEffectEvent za omotavanje događaja i kuku useEffect za pokretanje nuspojava.

Učinkovito riješite nuspojave

React kuke otvaraju svijet mogućnosti, a razumijevanje razlike između useEffect, useLayoutEffect i useEffectEvent kuke mogu značajno utjecati na to kako postupate s nuspojavama i DOM-om manipulacija. Neophodno je uzeti u obzir specifične zahtjeve i implikacije ovih kuka kako bi se napravile aplikacije prilagođene korisniku.