Esplora gli hook di recupero dei dati di React: useEffect, useLayoutEffect e useEffectEvent, confrontando le loro funzionalità per uno sviluppo efficiente di app.

Gli hook React sono un modo efficace per gestire gli effetti collaterali nei componenti React. Tre degli hook più comuni per la gestione degli effetti collaterali sono useEffect, useLayoutEffect e useEffectEvent. Ogni gancio ha il suo caso d'uso unico, quindi scegliere quello giusto per il lavoro è essenziale.

Il useEffect Hook

IL useEffect il gancio è un gancio fondamentale in React che ti consente di eseguire effetti collaterali come la manipolazione del DOM, operazioni asincrone e recupero dei dati nei componenti funzionali. Questo hook è una funzione che accetta due argomenti, la funzione effetto e l'array di dipendenze.

La funzione dell'effetto contiene il codice che esegue l'effetto collaterale e l'array di dipendenza determina quando viene eseguita la funzione dell'effetto. Se l'array di dipendenze è vuoto, la funzione dell'effetto viene eseguita solo una volta durante il rendering iniziale del componente. Altrimenti, la funzione dell'effetto viene eseguita ogni volta che cambia uno qualsiasi dei valori nell'array di dipendenze.

instagram viewer

Ecco un esempio di come utilizzare l'hook useEffect per recuperare i dati:

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;

Questo codice dimostra un App componente che recupera i dati da un'API esterna utilizzando l'hook useEffect. La funzione effetto di useEffect recupera i dati di esempio dall'API JSONPlaceholder. Quindi analizza la risposta JSON e imposta i dati recuperati su dati stato.

Con lo stato dei dati, il componente App esegue il rendering del file titolo proprietà di ciascun bene nello Stato.

Caratteristiche dell'usoEffect Hook

  • Amichevole asincrono: Supporta le operazioni asincrone in modo nativo, rendendolo conveniente per il recupero dei dati.
  • Viene eseguito dopo il rendering: L'hook useEffect esegue i suoi effetti dopo che l'applicazione ha eseguito il rendering del componente, garantendo che l'hook non blocchi l'interfaccia utente.
  • Ripulire: fornisce un modo integrato per eseguire la pulizia restituendo una funzione. Ciò può essere particolarmente utile quando si lavora con ascoltatori o abbonamenti.

Il useLayoutEffect Hook

IL utilizzareLayoutEffect il gancio è simile al useEffect hook ma viene eseguito in modo sincrono dopo tutte le mutazioni del DOM. Ciò significa che viene eseguito prima che il browser possa dipingere lo schermo, rendendolo adatto per attività che richiedono precisione controllo sul layout e sugli stili del DOM, come misurare la dimensione di un elemento, ridimensionare un elemento o animarlo posizione.

Di seguito è riportato un esempio di come utilizzare l'hook useLayoutEffect per modificare la larghezza di a pulsante elemento:

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">

exportdefault App;

Il blocco di codice sopra aumenta la larghezza dell'elemento pulsante di 12 pixel utilizzando l'hook useLayoutEffect. Ciò garantisce che la larghezza del pulsante aumenti prima che venga visualizzato sullo schermo.

Caratteristiche dell'usoLayoutEffect Hook

  • Sincrono: viene eseguito in modo sincrono, bloccando potenzialmente l'interfaccia utente se l'operazione al suo interno è pesante.
  • DOM lettura/scrittura: è più adatto per leggere e scrivere direttamente nel DOM, soprattutto se sono necessarie le modifiche prima che il browser venga ridisegnato.

L'Hook useEffectEvent

IL useEffectEvent hook è un hook React che risolve i problemi di dipendenza di useEffect gancio. Se hai familiarità con useEffect, sai che il suo array di dipendenze può essere complicato. A volte è necessario inserire nell'array delle dipendenze più valori strettamente necessari.

Per esempio:

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;

Questo codice dimostra il App componente che gestisce una connessione ad un servizio esterno. IL Collegare la funzione si connette a un URL specificato, mentre il file logConnection la funzione registra i dettagli della connessione. Infine, il onConnesso la funzione chiama il file logConnection funzione per registrare un messaggio di connessione riuscita quando il dispositivo si connette.

L'hook useEffect chiama la funzione connect, quindi imposta una funzione di callback onConnected da eseguire quando il dispositivo attiva l'evento onConnected. Questa richiamata registra un messaggio di connessione. Restituisce una funzione di pulizia che si attiva quando il componente viene smontato. Questa funzione di pulizia è responsabile della disconnessione del dispositivo.

L'array di dipendenze ha il file URL variabile e il onConnesso funzione. Il componente App creerà la funzione onConnected su ogni rendering. Ciò farà sì che la funzione useEffect venga eseguita in un ciclo, che continuerà a eseguire nuovamente il rendering del componente App.

Esistono diversi modi per risolvere il problema del ciclo useEffect. Tuttavia, il modo più efficiente per farlo senza aggiungere altri valori non necessari all'array di dipendenze è con l'hook 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;

Avvolgendo la funzione onConnected con l'hook useEffectEvent, l'hook useEffectEvent può sempre leggere gli ultimi valori di Messaggio E loginOpzioni parametri prima di passarlo all'hook useEffect. Ciò significa che useEffect non ha bisogno di fare affidamento sulla funzione onConnected o sui valori ad essa passati.

L'hook useEffectEvent è utile quando vuoi che useEffect dipenda da un valore specifico, anche se il effect attiva un evento che richiede altri valori che preferisci non utilizzare come dipendenze nel file useEffect.

Caratteristiche dell'usoEffectEvent Hook

  • È più adatto per gli effetti collaterali guidati dagli eventi.
  • IL useEffectEvent hook non funziona con gestori di eventi come al clic, onChange, eccetera.

L'hook useEffectEvent è ancora sperimentale e non disponibile in Reagisci versione 18 ganci.

Quando usare quale gancio?

Ciascuno degli hook di recupero dati di cui sopra è adatto a diverse situazioni:

  • Recuperando i dati: useEffect è una scelta eccellente.
  • Manipolazioni dirette del DOM: Se è necessario apportare modifiche sincrone al DOM prima di un ridisegno, optare per useLayoutEffect.
  • Operazioni leggere: per le operazioni che non rischiano di bloccare l'interfaccia utente, è possibile utilizzare liberamente useEffect.
  • Effetti collaterali guidati dagli eventi: utilizzare l'hook useEffectEvent per racchiudere gli eventi e l'hook useEffect per eseguire gli effetti collaterali.

Gestire gli effetti collaterali in modo efficiente

Gli hook React aprono un mondo di possibilità e comprendono la differenza tra useEffect, Gli hook useLayoutEffect e useEffectEvent possono avere un impatto significativo sul modo in cui gestisci gli effetti collaterali e il DOM manipolazione. È essenziale considerare i requisiti e le implicazioni specifici di questi hook per creare applicazioni user-friendly.