UseEffect, useLayoutEffect ja useEffectEvent: Reactin tiedonhakukoukkujen vertailu

React-koukut ovat tehokas tapa hallita React-komponenttien sivuvaikutuksia. Kolme yleisintä sivuvaikutusten käsittelyn koukkua ovat useEffect, useLayoutEffect ja useEffectEvent. Jokaisella koukulla on ainutlaatuinen käyttötapansa, joten on tärkeää valita oikea koukku työhön.

UseEffect Hook

The useEffect koukku on a peruskoukku Reactissa jonka avulla voit suorittaa sivuvaikutuksia, kuten DOM-manipulaatiota, asynkronisia toimintoja ja tiedonhaku toiminnallisissa komponenteissa. Tämä koukku on funktio, joka ottaa kaksi argumenttia, tehostefunktion ja riippuvuustaulukon.

Tehostefunktio sisältää koodin, joka suorittaa sivuvaikutuksen, ja riippuvuustaulukko määrittää, milloin tehostefunktio suoritetaan. Jos riippuvuustaulukko on tyhjä, tehostefunktio suoritetaan vain kerran komponentin alkuperäisessä renderöinnissä. Muuten tehostefunktio suoritetaan aina, kun jokin riippuvuustaulukon arvoista muuttuu.

Tässä on esimerkki useEffect-koukun käyttämisestä tietojen hakemiseen:

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;

Tämä koodi osoittaa Sovellus komponentti, joka hakee tiedot ulkoisesta API: sta useEffect-koukun avulla. UseEffectin tehostefunktio hakee näytetiedot JSONPlaceholder API: sta. Sitten se jäsentää JSON-vastauksen ja asettaa haetut tiedot arvoon tiedot osavaltio.

Tietojen tilassa sovelluskomponentti hahmontaa otsikko kunkin kohteen omaisuutta osavaltiossa.

KäyttöominaisuudetEffect Hook

• Asynkroninen ystävällinen: Se tukee asynkronisia toimintoja natiivisti, mikä tekee siitä kätevän tietojen noutamiseen.
• Toimii renderoinnin jälkeen: useEffect-koukku suorittaa tehostensa sen jälkeen, kun sovellus tekee komponentin, ja varmistaa, että koukku ei estä käyttöliittymää.
• Siivota: Se tarjoaa integroidun tavan suorittaa puhdistus palauttamalla funktion. Tämä voi olla erityisen hyödyllistä, kun työskentelet kuuntelijoiden tai tilausten kanssa.

UseLayoutEffect Hook

The useLayoutEffect koukku on samanlainen kuin useEffect koukku, mutta toimii synkronisesti kaikkien DOM-mutaatioiden jälkeen. Tämä tarkoittaa, että se toimii ennen kuin selain voi maalata näytön, joten se sopii tarkkuutta vaativiin tehtäviin hallita DOM-asettelua ja tyylejä, kuten elementin koon mittaaminen, elementin koon muuttaminen tai sen animointi asema.

Alla on esimerkki siitä, kuinka useLayoutEffect-koukun avulla voit muuttaa a: n leveyttä -painiketta elementti:

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;

Yllä oleva koodilohko lisää painikeelementin leveyttä 12 pikselillä useLayoutEffect-koukun avulla. Tämä varmistaa, että painikkeen leveys kasvaa ennen kuin painike tulee näkyviin näytölle.

UseLayoutEffect Hookin ominaisuudet

• Synkroninen: Se suoritetaan synkronisesti ja saattaa estää käyttöliittymän, jos sen sisällä oleva toiminto on raskas.
• DOM-luku/kirjoitus: Se sopii parhaiten lukemiseen ja kirjoittamiseen suoraan DOM: iin, varsinkin jos tarvitset muutoksia ennen kuin selain maalaa uudelleen.

UseEffectEvent Hook

The useEffectEvent hook on React-koukku, joka ratkaisee riippuvuusongelmat useEffect koukku. Jos tunnet useEffectin, tiedät, että sen riippuvuustaulukko voi olla hankala. Joskus sinun on asetettava riippuvuustaulukkoon enemmän arvoja, jotka ovat ehdottoman välttämättömiä.

Esimerkiksi:

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;

Tämä koodi osoittaa Sovellus komponentti, joka hallitsee yhteyttä ulkoiseen palveluun. The kytkeä -toiminto muodostaa yhteyden määritettyyn URL-osoitteeseen, kun taas logConnection toiminto kirjaa yhteystiedot lokiin. Lopuksi, onConnected toiminto kutsuu logConnection toiminto kirjaamaan onnistuneen yhteyden viestin, kun laite muodostaa yhteyden.

UseEffect-koukku kutsuu yhdistämistoiminnon ja määrittää sitten onConnected-takaisinsoittotoiminnon suoritettavaksi, kun laite käynnistää onConnected-tapahtuman. Tämä takaisinsoitto kirjaa yhteysviestin. Se palauttaa puhdistustoiminnon, joka aktivoituu, kun komponentti irrotetaan. Tämä puhdistustoiminto on vastuussa laitteen irrottamisesta.

Riippuvuustaulukossa on url muuttuja ja onConnected toiminto. Sovelluskomponentti luo onConnected-funktion jokaiseen renderöintiin. Tämä saa useEffect-funktion suorittamaan silmukan, joka jatkaa App-komponentin uudelleenhahmontamista.

UseEffect-silmukkaongelman ratkaisemiseksi on useita tapoja. Silti tehokkain tapa tehdä se lisäämättä tarpeettomia arvoja riippuvuustaulukkoosi on useEffectEvent-koukku.

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;

Käärimällä onConnected-funktion useEffectEvent-koukkuun, useEffectEvent-koukku voi aina lukea viimeisimmät arvot viesti ja kirjautumisasetukset parametrit ennen kuin siirrät sen useEffect-koukkuun. Tämä tarkoittaa, että useEffectin ei tarvitse luottaa onConnected-funktioon tai sille välitettyihin arvoihin.

UseEffectEvent-koukku on hyödyllinen, kun haluat useEffectin riippuvan tietystä arvosta, vaikka vaikutus laukaisee tapahtuman, joka vaatii muita arvoja, joita et halua käyttää riippuvuuksina useEffect.

UseEffectEvent Hookin ominaisuudet

• Se soveltuu parhaiten tapahtumien aiheuttamiin sivuvaikutuksiin.
• The useEffectEvent koukku ei toimi tapahtumakäsittelijöiden kanssa, kuten klikkaamalla, onChange, jne.

UseEffectEvent-koukku on vielä kokeellinen, eikä se ole käytettävissä React version 18 koukut.

Milloin mitä koukkua käytetään?

Jokainen yllä olevista tiedonhakukoukuista sopii eri tilanteisiin:

• Tietoja noudetaan: UseEffect on erinomainen valinta.
• Suorat DOM-manipulaatiot: Jos sinun on tehtävä synkronisia muutoksia DOM: iin ennen uudelleenmaalausta, valitse useLayoutEffect.
• Kevyt operaatiot: UseEffectiä voi käyttää vapaasti toimiin, joissa ei ole riskiä estää käyttöliittymää.
• Tapahtumalähtöiset sivuvaikutukset: Käytä useEffectEvent-koukkua tapahtumien käärimiseen ja useEffect-koukun suorittamiseen sivuvaikutuksia.

Käsittele sivuvaikutuksia tehokkaasti

React-koukut avaavat mahdollisuuksien maailman ja ymmärtävät eron useEffectin, useLayoutEffect- ja useEffectEvent-koukut voivat vaikuttaa merkittävästi sivuvaikutusten ja DOM: n käsittelyyn manipulointi. On tärkeää ottaa huomioon näiden koukkujen erityisvaatimukset ja seuraukset käyttäjäystävällisten sovellusten tekemiseksi.