UseEffect, useLayoutEffect ja useEffectEvent: Reacti andmete toomise konksude võrdlus

Reacti konksud on võimas viis Reacti komponentide kõrvalmõjude haldamiseks. Kolm kõige levinumat konksu kõrvalmõjude käsitlemiseks on useEffect, useLayoutEffect ja useEffectEvent. Igal konksul on ainulaadne kasutusjuht, seega on töö jaoks õige valimine hädavajalik.

UseEffect Hook

The useEffect konks on a põhiline konks Reactis mis võimaldab teil teostada kõrvalmõjusid, nagu DOM-i manipuleerimine, asünkroonsed toimingud ja andmete toomine funktsionaalsetes komponentides. See konks on funktsioon, mis kasutab kahte argumenti, efekti funktsiooni ja sõltuvuse massiivi.

Efekti funktsioon sisaldab koodi, mis täidab kõrvalmõju, ja sõltuvuste massiiv määrab, millal efekti funktsioon töötab. Kui sõltuvuse massiiv on tühi, käitatakse efektifunktsiooni komponendi algsel renderdamisel ainult üks kord. Vastasel juhul käivitub efekti funktsioon alati, kui mis tahes sõltuvuse massiivi väärtustest muutub.

Siin on näide, kuidas kasutada andmete toomiseks konksu useEffect:

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;

See kood näitab Rakendus komponent, mis hangib andmeid välisest API-st, kasutades konksu useEffect. Funktsiooni useEffect efekti funktsioon toob näidisandmed JSONPlaceholder API-st. Seejärel sõelub see JSON-i vastuse ja seab allalaaditud andmed väärtusele andmeid olek.

Andmeoleku korral renderdab rakenduse komponent pealkiri iga eseme vara osariigis.

KasutusomadusedEffect Hook

• Asünkroonne sõbralik: see toetab asünkroonseid toiminguid algselt, muutes selle andmete toomiseks mugavaks.
• Töötab pärast renderdamist: konks useEffect käivitab oma efektid pärast seda, kui rakendus komponendi renderdab, tagades, et konks ei blokeeri kasutajaliidest.
• Korista ära: see pakub integreeritud viisi puhastamiseks funktsiooni tagastamise teel. See võib olla eriti kasulik kuulajate või tellimustega töötades.

UseLayoutEffect Hook

The useLayoutEffect konks on sarnane useEffect konks, kuid töötab sünkroonselt pärast kõiki DOM-i mutatsioone. See tähendab, et see käivitub enne, kui brauser jõuab ekraani värvida, mistõttu sobib see täpset tööd nõudvate ülesannete jaoks DOM-i paigutuse ja stiilide juhtimine, näiteks elemendi suuruse mõõtmine, elemendi suuruse muutmine või selle animeerimine positsiooni.

Allpool on näide, kuidas kasutada konksu useLayoutEffect a laiuse muutmiseks nuppu 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;

Ülaltoodud koodiplokk suurendab nupu elemendi laiust 12 piksli võrra, kasutades konksu useLayoutEffect. See tagab, et nupu laius suureneb enne, kui nupp ekraanile ilmub.

KasutamiseLayoutEffect Hook omadused

• Sünkroonne: see käivitatakse sünkroonselt, potentsiaalselt blokeerides kasutajaliidese, kui selles tehtav toiming on raske.
• DOM-i lugemine/kirjutamine: see sobib kõige paremini otse DOM-i lugemiseks ja kirjutamiseks, eriti kui vajate muudatusi enne brauseri värvimist.

UseEffectEvent Hook

The useEffectEvent hook on Reacti konks, mis lahendab sõltuvusprobleemid useEffect konks. Kui tunnete rakendust useEffect, teate, et selle sõltuvuste massiiv võib olla keeruline. Mõnikord peate sõltuvuse massiivi lisama rohkem väärtusi, mis on tingimata vajalikud.

Näiteks:

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;

See kood näitab Rakendus komponent, mis haldab ühendust välisteenusega. The ühendada funktsioon loob ühenduse määratud URL-iga, samas kui logConnection funktsioon logib ühenduse üksikasjad. Lõpuks, onConnected funktsioon kutsub esile logConnection funktsioon eduka ühenduse sõnumi logimiseks, kui seade ühendab.

Konks useEffect kutsub välja ühenduse funktsiooni, seejärel seadistab tagasihelistusfunktsiooni onConnected, mis käivitatakse, kui seade käivitab sündmuse onConnected. See tagasihelistamine logib ühenduse sõnumi. See tagastab puhastusfunktsiooni, mis aktiveerub komponendi lahtiühendamisel. See puhastusfunktsioon vastutab seadme lahtiühendamise eest.

Sõltuvusmassiivil on url muutuja ja onConnected funktsiooni. Rakenduse komponent loob funktsiooni onConnected iga renderduse korral. See käivitab funktsiooni useEffect tsükli, mis jätkab rakenduse komponendi uuesti renderdamist.

UseEffecti silmuse probleemi lahendamiseks on mitu võimalust. Siiski on kõige tõhusam viis seda teha ilma sõltuvusmassiivi tarbetuid väärtusi lisamata konks 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;

Mähkides funktsiooni onConnected konksuga useEffectEvent, saab konks useEffectEvent alati lugeda konksu uusimaid väärtusi. sõnum ja sisselogimisvalikud parameetrid enne selle konksule useEffect edastamist. See tähendab, et useEffect ei pea toetuma funktsioonile onConnected ega sellele edastatud väärtustele.

Konks useEffectEvent on kasulik, kui soovite, et teie useEffect sõltuks konkreetsest väärtusest, isegi kui efekt käivitab sündmuse, mis nõuab muid väärtusi, mida te ei soovi rakenduses sõltuvustena kasutada useEffect.

Kasutamise omadusedEffectEvent Hook

• See sobib kõige paremini sündmustest tingitud kõrvaltoimete korral.
• The useEffectEvent konks ei tööta sündmuste käitlejatega nagu onClick, onChange, jne.

Konks useEffectEvent on endiselt katseline ega ole saadaval React versioon 18 konksud.

Millal millist konksu kasutada?

Kõik ülaltoodud andmete toomise konksud sobivad erinevates olukordades:

• Andmete toomine: UseEffect on suurepärane valik.
• Otsesed DOM-i manipulatsioonid: kui peate enne ümbervärvimist DOM-is sünkroonseid muudatusi tegema, valige useLayoutEffect.
• Kerged toimingud: toimingute jaoks, mis ei ohusta kasutajaliidese blokeerimist, saate vabalt kasutada useEffecti.
• Sündmustest tingitud kõrvaltoimed: Kasutage konksu useEffectEvent sündmuste kokkuvõtmiseks ja konksu useEffect kõrvalmõjude käivitamiseks.

Käsitsege tõhusalt kõrvaltoimeid

Reacti konksud avavad võimaluste maailma ja mõistavad kasutusefekti erinevust, useLayoutEffect ja useEffectEvent konksud võivad märkimisväärselt mõjutada kõrvalmõjude ja DOM-i käsitlemist manipuleerimine. Kasutajasõbralike rakenduste loomiseks on oluline arvestada nende konksude spetsiifilisi nõudeid ja tagajärgi.