„useEffect“, „useLayoutEffect“ ir „useEffectEvent“: „React“ duomenų gavimo kabliukų palyginimas

„React“ kabliukai yra galingas būdas valdyti „React“ komponentų šalutinį poveikį. Trys dažniausiai pasitaikantys šalutinį poveikį valdantys kabliukai yra „useEffect“, „useLayoutEffect“ ir „useEffectEvent“. Kiekvienas kabliukas turi savo unikalų naudojimo atvejį, todėl labai svarbu pasirinkti tinkamą kabliuką.

„useEffect Hook“.

The naudojimoEfektas kabliukas yra a pagrindinis „React“ kabliukas leidžia atlikti šalutinį poveikį, pvz., manipuliuoti DOM, asinchronines operacijas ir duomenų gavimas funkciniuose komponentuose. Šis kabliukas yra funkcija, kuriai naudojami du argumentai: efekto funkcija ir priklausomybės masyvas.

Efekto funkcijoje yra kodas, kuris atlieka šalutinį poveikį, o priklausomybės masyvas nustato, kada veikia efekto funkcija. Jei priklausomybės masyvas tuščias, efekto funkcija paleidžiama tik vieną kartą pradiniame komponento atvaizdavime. Kitu atveju efekto funkcija paleidžiama, kai pasikeičia kuri nors priklausomybės masyvo reikšmė.

Štai pavyzdys, kaip naudoti kabliuką useEffect duomenims gauti:

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 kodas parodo Programėlė komponentas, kuris gauna duomenis iš išorinės API, naudodamas „useEffect Hook“. „useEffect“ efekto funkcija paima duomenų pavyzdžius iš JSONPlaceholder API. Tada jis analizuoja JSON atsakymą ir nustato gautus duomenis į duomenis valstybė.

Esant duomenų būsenai, programos komponentas pateikia titulą kiekvieno daikto nuosavybė valstybėje.

Naudojimo ypatybėsEffect Hook

• Asinchroninis draugiškas: Jis palaiko asinchronines operacijas, todėl patogu gauti duomenis.
• Vyksta po atvaizdavimo: „useEffect Hook“ atlieka savo efektus, kai programa pateikia komponentą, užtikrinant, kad „hook“ neužblokuotų vartotojo sąsajos.
• Išvalyti: Tai yra integruotas būdas atlikti valymo grąžinant funkciją. Tai gali būti ypač naudinga dirbant su klausytojais ar prenumeratoriais.

„useLayoutEffect Hook“.

The useLayoutEffect kabliukas yra panašus į naudojimoEfektas kabliukas, bet veikia sinchroniškai po visų DOM mutacijų. Tai reiškia, kad jis paleidžiamas prieš naršyklei nuspalvinant ekraną, todėl jis tinkamas užduotims, kurioms reikia tikslių valdyti DOM išdėstymą ir stilius, pvz., išmatuoti elemento dydį, keisti elemento dydį arba animuoti jo padėtis.

Toliau pateikiamas pavyzdys, kaip naudoti kabliuką useLayoutEffect norint pakeisti a plotį mygtuką elementas:

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;

Aukščiau pateiktas kodo blokas padidina mygtuko elemento plotį 12 pikselių naudojant „useLayoutEffect“ kabliuką. Taip užtikrinama, kad mygtuko plotis padidės prieš jam pasirodant ekrane.

Naudojimo LayoutEffect Hook charakteristikos

• Sinchroninis: Jis vykdomas sinchroniškai ir gali blokuoti vartotojo sąsają, jei joje atliekama sunki operacija.
• DOM skaitymas / rašymas: geriausiai tinka skaityti ir rašyti tiesiai į DOM, ypač jei reikia atlikti pakeitimus prieš naršyklei perdarant.

„useEffectEvent Hook“.

The useEffectEvent „hook“ yra „React Hook“, kuris išsprendžia priklausomybių problemas naudojimoEfektas kabliukas. Jei esate susipažinę su useEffect, žinote, kad jo priklausomybės masyvas gali būti sudėtingas. Kartais į priklausomybės masyvą turite įdėti daugiau verčių, kurios yra būtinos.

Pavyzdžiui:

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 kodas parodo Programėlė komponentas, valdantis ryšį su išorine paslauga. The Prisijungti funkcija prisijungia prie nurodyto URL, o logConnection funkcija registruoja ryšio informaciją. Galiausiai, onConnected funkcija iškviečia logConnection funkcija užregistruoti sėkmingo prisijungimo pranešimą, kai įrenginys prisijungia.

„useEffect Hook“ iškviečia prisijungimo funkciją, tada nustato „onConnected“ atgalinio skambinimo funkciją, kuri bus vykdoma, kai prietaisas suaktyvina įvykį onConnected. Šis atgalinis skambutis registruoja prisijungimo pranešimą. Jis grąžina valymo funkciją, kuri suaktyvinama, kai komponentas atjungiamas. Ši valymo funkcija yra atsakinga už įrenginio atjungimą.

Priklausomybių masyvas turi url kintamasis ir onConnected funkcija. Programos komponentas sukurs funkciją onConnected kiekviename atvaizdavime. Dėl to funkcija useEffect veiks cikle, o tai toliau iš naujo atvaizduos programos komponentą.

Yra keletas būdų, kaip išspręsti „useEffect“ ciklo problemą. Vis dėlto efektyviausias būdas tai padaryti nepridedant daugiau nereikalingų reikšmių į priklausomybės masyvą yra naudoti „useEffectEvent“ kabliuką.

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;

Sujungus funkciją onConnected su useEffectEvent kabliu, useEffectEvent kabliukas visada gali nuskaityti naujausias žinutę ir prisijungimo parinktys parametrus prieš perduodant jį į useEffect kabliuką. Tai reiškia, kad useEffect nereikia pasikliauti funkcija onConnected arba jai perduotomis reikšmėmis.

„useEffectEvent“ kabliukas yra naudingas, kai norite, kad „useEffect“ priklausytų nuo konkrečios reikšmės, net jei efektas suaktyvina įvykį, kuriam reikalingos kitos reikšmės, kurių nenorite naudoti kaip priklausomybių naudojimoEfektas.

Naudojimo ypatybėsEffectEvent Hook

• Tai geriausiai tinka įvykių sukeliamiems šalutiniams poveikiams.
• The useEffectEvent kabliukas neveikia su tokių įvykių tvarkytojais kaip paspaudus, onChangeir kt.

„useEffectEvent“ kabliukas vis dar yra eksperimentinis ir nepasiekiamas React versija 18 kabliukai.

Kada naudoti kurį kabliuką?

Kiekvienas iš aukščiau pateiktų duomenų gavimo kabliukų tinka skirtingoms situacijoms:

• Gaunami duomenys: UseEffect yra puikus pasirinkimas.
• Tiesioginės DOM manipuliacijos: Jei prieš perdažant reikia sinchroniškai pakeisti DOM, pasirinkite useLayoutEffect.
• Lengvos operacijos: operacijoms, kurioms nekyla pavojus blokuoti vartotojo sąsają, galite laisvai naudoti „useEffect“.
• Įvykių sukeltas šalutinis poveikis: naudokite kabliuką useEffectEvent įvykiams apvynioti, o kabliuką useEffect – šalutiniams poveikiams paleisti.

Efektyviai valdykite šalutinį poveikį

„React“ kabliukai atveria galimybių pasaulį ir supranta skirtumą tarp „useEffect“, „useLayoutEffect“ ir „useEffectEvent“ kabliukai gali labai paveikti šalutinį poveikį ir DOM manipuliavimas. Norint sukurti patogias programas, būtina atsižvelgti į specifinius šių kabliukų reikalavimus ir pasekmes.