Cârligele React sunt o modalitate puternică de a gestiona efectele secundare ale componentelor React. Trei dintre cele mai comune cârlige pentru gestionarea efectelor secundare sunt useEffect, useLayoutEffect și useEffectEvent. Fiecare cârlig are cazul său unic de utilizare, așa că alegerea celui potrivit pentru muncă este esențială.
Cuprins
Cârligul useEffect
Cârligul useEffect este un cârlig fundamental în React care vă permite să efectuați efecte secundare, cum ar fi manipularea DOM, operațiuni asincrone și preluarea datelor în componente funcționale. Acest cârlig este o funcție care ia două argumente, funcția de efect și matricea de dependențe.
Funcția de efect conține codul care efectuează efectul secundar, iar matricea de dependență determină când rulează funcția de efect. Dacă matricea de dependență este goală, funcția de efect rulează o singură dată la randarea inițială a componentei. În caz contrar, funcția efect rulează ori de câte ori oricare dintre valorile din matricea de dependențe se modifică.
Iată un exemplu despre cum să utilizați cârligul useEffect pentru a prelua date:
import React from "react";function App() {
const [data, setData] = React.useState([]);React.useEffect(() => {
fetch("<https://jsonplaceholder.typicode.com/posts>")
.then((response) => response.json())
.then((data) => setData(data));
}, []);return (
<div className="app">
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</div>
);
}export default App;
Acest cod demonstrează o componentă a aplicației care preia date dintr-un API extern folosind cârligul useEffect. Funcția de efect a useEffect preia date mostre din API-ul JSONPlaceholder. Apoi analizează răspunsul JSON și setează datele preluate la starea datelor.
Cu starea datelor, componenta App redă proprietatea titlului fiecărui element din stare.
Caracteristicile utilizării Effect Hook
- Utilizabil asincron: acceptă operațiuni asincrone în mod nativ, făcându-l convenabil pentru preluarea datelor.
- Rulează după randare: Hook-ul useEffect își execută efectele după ce aplicația redă componenta, asigurându-se că hook-ul nu blochează interfața de utilizare.
- Curățare: oferă o modalitate integrată de a efectua curățarea prin returnarea unei funcții. Acest lucru poate fi util în special atunci când lucrați cu ascultători sau cu abonamente.
Cârligul useLayoutEffect
Cârligul useLayoutEffect este similar cu cârligul useEffect, dar rulează sincron după toate mutațiile DOM. Aceasta înseamnă că rulează înainte ca browserul să poată picta ecranul, făcându-l potrivit pentru sarcini care necesită control precis asupra aspectului și stilurilor DOM, cum ar fi măsurarea dimensiunii unui element, redimensionarea unui element sau animarea poziției acestuia.
Mai jos este un exemplu de utilizare a cârligului useLayoutEffect pentru a modifica lățimea unui element de buton:
import React from "react";function App() {
const button = React.useRef();React.useLayoutEffect(() => {
const { width } = button.current.getBoundingClientRect();button.current.style.width = `${width + 12}px`;
}, []);return (
<div className="app">
<button ref={button}>Click Me</button>
</div>
);
}export default App;
Blocul de cod de mai sus mărește lățimea elementului buton cu 12 pixeli folosind cârligul useLayoutEffect. Acest lucru asigură că lățimea butonului crește înainte ca butonul să fie afișat pe ecran.
Caracteristicile cârligului useLayoutEffect
- Sincron: se execută sincron, blocând eventual interfața de utilizare dacă operațiunea din cadrul acesteia este grea.
- Citire/scriere DOM: este cel mai potrivit pentru citirea și scrierea direct în DOM, mai ales dacă aveți nevoie de modificări înainte ca browserul să se revopsească.
Cârligul useEffectEvent
Hook-ul useEffectEvent este un cârlig React care rezolvă problemele de dependențe ale hook-ului useEffect. Dacă sunteți familiarizat cu useEffect, știți că matricea de dependențe poate fi dificilă. Uneori, trebuie să puneți mai multe valori în matricea de dependențe care sunt strict necesare.
De exemplu:
import React from "react";function App() {
const connect = (url) => {
};const logConnection = (message, loginOptions) => {
};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>;
}export default App;
Acest cod demonstrează componenta aplicației care gestionează o conexiune la un serviciu extern. Funcția de conectare se conectează la o adresă URL specificată, în timp ce funcția logConnection înregistrează detaliile conexiunii. În cele din urmă, funcția onConnected apelează funcția logConnection pentru a înregistra un mesaj de conexiune de succes atunci când dispozitivul se conectează.
Hook-ul useEffect apelează funcția de conectare, apoi configurează o funcție de apel invers onConnected care să fie executată atunci când dispozitivul declanșează evenimentul onConnected. Acest apel invers înregistrează un mesaj de conectare. Returnează o funcție de curățare care se activează atunci când componenta se demontează. Această funcție de curățare este responsabilă pentru deconectarea dispozitivului.
Tabloul de dependență are variabila url și funcția onConnected. Componenta App va crea funcția onConnected la fiecare randare. Acest lucru va face ca funcția useEffect să ruleze într-o buclă, care va continua redarea din nou a componentei App.
Există mai multe moduri de a rezolva problema buclei useEffect. Totuși, cel mai eficient mod de a face acest lucru fără a adăuga mai multe valori inutile la matricea de dependențe este cu ajutorul cârligului useEffectEvent.
import React from "react";function App() {
const connect = (url) => {
};const logConnection = (message, loginOptions) => {
};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>;
}
export default App;
Prin împachetarea funcției onConnected cu cârligul useEffectEvent, cârligul useEffectEvent poate citi întotdeauna cele mai recente valori ale mesajului și parametrilor loginOptions înainte de a-l transmite cârligului useEffect. Aceasta înseamnă că useEffect nu trebuie să se bazeze pe funcția onConnected sau pe valorile transmise acesteia.
Cârligul useEffectEvent este util atunci când doriți ca useEffectul dvs. să depindă de o anumită valoare, chiar dacă efectul declanșează un eveniment care necesită alte valori pe care preferați să nu le utilizați ca dependențe în useEffect.
Caracteristicile utilizării HookEffectEvent
- Este cel mai potrivit pentru efectele secundare determinate de evenimente.
- Cârligul useEffectEvent nu funcționează cu handlere de evenimente precum onClick, onChange etc.
Cârligul useEffectEvent este încă experimental și indisponibil în cârligele React versiunea 18.
Când să folosiți ce cârlig?
Fiecare dintre cârligele de preluare a datelor de mai sus este potrivit pentru diferite situații:
- Preluarea datelor: useEffect este o alegere excelentă.
- Manipulări directe DOM: dacă trebuie să faceți modificări sincrone în DOM înainte de o revopsire, optați pentru useLayoutEffect.
- Operațiuni ușoare: pentru operațiuni care nu riscă să blocheze interfața de utilizare, puteți utiliza în mod liber useEffect.
- Efecte secundare determinate de evenimente: utilizați cârligul useEffectEvent pentru a încheia evenimentele și cârligul useEffect pentru a rula efectele secundare.
Gestionați eficient efectele secundare
Cârligele React deschid o lume de posibilități, iar înțelegerea diferenței dintre cârligele useEffect, useLayoutEffect și useEffectEvent poate avea un impact semnificativ asupra modului în care gestionați efectele secundare și manipularea DOM. Este esențial să luați în considerare cerințele și implicațiile specifice ale acestor cârlige pentru a face aplicații ușor de utilizat.