UseEffect, useLayoutEffect un useEffectEvent: React datu ieneses āķu salīdzinājums

React āķi ir spēcīgs veids, kā pārvaldīt React komponentu blakusparādības. Trīs no visizplatītākajiem blakusparādību novēršanas āķiem ir useEffect, useLayoutEffect un useEffectEvent. Katram āķim ir savs unikāls lietošanas gadījums, tāpēc ir svarīgi izvēlēties darbam piemērotāko.

UseEffect Hook

The useEffect āķis ir a pamats React kas ļauj veikt tādas blakusparādības kā DOM manipulācijas, asinhronas darbības un datu ielāde funkcionālajos komponentos. Šis āķis ir funkcija, kas izmanto divus argumentus: efekta funkciju un atkarības masīvu.

Efekta funkcija satur kodu, kas veic blakus efektu, un atkarības masīvs nosaka, kad efekta funkcija darbojas. Ja atkarības masīvs ir tukšs, efekta funkcija tiek palaista tikai vienu reizi komponenta sākotnējā renderēšanā. Pretējā gadījumā efekta funkcija darbojas ikreiz, kad mainās kāda no vērtībām atkarības masīvā.

Šeit ir piemērs, kā izmantot āķi useEffect, lai iegūtu datus:

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;

Šis kods parāda App komponents, kas ienes datus no ārējas API, izmantojot useEffect āķi. UseEffect efektu funkcija ienes datu paraugus no JSONPlaceholder API. Pēc tam tas parsē JSON atbildi un iestata izgūtos datus uz datus Valsts.

Izmantojot datu stāvokli, lietotnes komponents atveido virsraksts katras preces īpašums valstī.

Lietošanas raksturojumsEffect Hook

• Asinhroni draudzīgs: tā sākotnēji atbalsta asinhronās darbības, padarot to ērtu datu ielādei.
• Darbojas pēc renderēšanas: UseEffect āķis izpilda savus efektus pēc tam, kad lietojumprogramma ir atveidojusi komponentu, nodrošinot, ka āķis nebloķē lietotāja saskarni.
• Satīrīt: Tas nodrošina integrētu veidu, kā veikt tīrīšanu, atgriežot funkciju. Tas var būt īpaši noderīgi, strādājot ar klausītājiem vai abonementiem.

UseLayoutEffect Hook

The useLayoutEffect āķis ir līdzīgs useEffect āķis, bet darbojas sinhroni pēc visām DOM mutācijām. Tas nozīmē, ka tas darbojas, pirms pārlūkprogramma var krāsot ekrānu, padarot to piemērotu uzdevumiem, kuriem nepieciešama precīza kontrolēt DOM izkārtojumu un stilus, piemēram, izmērīt elementa izmēru, mainīt elementa izmērus vai animēt tā pozīciju.

Tālāk ir sniegts piemērs tam, kā izmantot āķi useLayoutEffect, lai mainītu a platumu pogu elements:

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;

Iepriekš minētais koda bloks palielina pogas elementa platumu par 12 pikseļiem, izmantojot āķi useLayoutEffect. Tas nodrošina, ka pogas platums palielinās pirms pogas parādīšanās ekrānā.

Izmantošanas LayoutEffect Hook raksturojums

• Sinhrons: tā tiek izpildīta sinhroni, iespējams, bloķējot lietotāja interfeisu, ja darbība tajā ir smaga.
• DOM lasīšana/rakstīšana: tas ir vislabāk piemērots lasīšanai un rakstīšanai tieši DOM, it īpaši, ja izmaiņas ir nepieciešamas pirms pārlūkprogrammas pārkrāsošanas.

UseEffectEvent āķis

The useEffectEvent hook ir React hook, kas atrisina atkarību problēmas useEffect āķis. Ja esat iepazinies ar useEffect, jūs zināt, ka tā atkarību masīvs var būt sarežģīts. Dažreiz atkarības masīvā ir jāievieto vairāk vērtību, kas ir noteikti nepieciešamas.

Piemēram:

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;

Šis kods parāda App komponents, kas pārvalda savienojumu ar ārēju pakalpojumu. The savienot funkcija izveido savienojumu ar norādīto URL, savukārt logConnection funkcija reģistrē savienojuma informāciju. Visbeidzot, onConnected funkcija izsauc logConnection funkcija, lai reģistrētu veiksmīga savienojuma ziņojumu, kad ierīce izveido savienojumu.

UseEffect hook izsauc savienojuma funkciju, pēc tam iestata onConnected atzvanīšanas funkciju, kas jāizpilda, kad ierīci aktivizē notikumu onConnected. Šis atzvans reģistrē savienojuma ziņojumu. Tas atgriež tīrīšanas funkciju, kas aktivizējas, kad komponents tiek atvienots. Šī tīrīšanas funkcija ir atbildīga par ierīces atvienošanu.

Atkarību masīvam ir url mainīgais un onConnected funkciju. Lietotnes komponents katrā renderējumā izveidos funkciju onConnected. Tādējādi funkcija useEffect darbosies cilpā, kas turpinās lietotnes komponenta atkārtotu renderēšanu.

Ir vairāki veidi, kā atrisināt useEffect cilpas problēmu. Tomēr visefektīvākais veids, kā to izdarīt, nepievienojot atkarības masīvam vairāk nevajadzīgu vērtību, ir izmantot āķi 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;

Ietinot funkciju onConnected ar āķi useEffectEvent, āķis useEffectEvent vienmēr var nolasīt jaunākās ziņa un pieteikšanāsOpcijas parametrus, pirms to nodod useEffect āķim. Tas nozīmē, ka useEffect nav jāpaļaujas uz funkciju onConnected vai tai nodotajām vērtībām.

UseEffectEvent āķis ir noderīgs, ja vēlaties, lai jūsu useEffect būtu atkarīgs no noteiktas vērtības, pat ja efekts aktivizē notikumu, kam nepieciešamas citas vērtības, kuras nevēlaties izmantot kā atkarības useEffect.

Lietošanas raksturojumsEffectEvent Hook

• Tas ir vislabāk piemērots notikumu izraisītām blakusparādībām.
• The useEffectEvent āķis nedarbojas ar notikumu apstrādātājiem, piemēram onClick, onChangeutt.

UseEffectEvent āķis joprojām ir eksperimentāls un nav pieejams React versija 18 āķi.

Kad lietot kuru āķi?

Katrs no iepriekš minētajiem datu iegūšanas āķiem ir piemērots dažādām situācijām:

• Notiek datu iegūšana: UseEffect ir lieliska izvēle.
• Tiešās DOM manipulācijas: ja pirms atkārtotas krāsošanas ir jāveic sinhronas izmaiņas DOM, izvēlieties useLayoutEffect.
• Vieglas operācijas: darbībām, kurās nav riska bloķēt lietotāja saskarni, varat brīvi izmantot useEffect.
• Notikumu izraisītas blakusparādības: izmantojiet āķi useEffectEvent, lai aptvertu notikumus, un useEffect āķi, lai palaistu blakusparādības.

Efektīvi apstrādājiet blakusparādības

React āķi paver iespēju pasauli un izprot atšķirību starp useEffect, useLayoutEffect un useEffectEvent āķi var būtiski ietekmēt to, kā jūs apstrādājat blakusparādības un DOM manipulācijas. Lai izveidotu lietotājam draudzīgas lietojumprogrammas, ir svarīgi ņemt vērā šo āķu īpašās prasības un sekas.