React useEffect() Hook: utilizzo, come e quando usarlo

Introduzione all'hook useEffect()

useeffect aggancia un componente chiave.Gestisce attività come il recupero dei dati, l'impostazione di listener di eventi o la modifica del DOM e consente agli utenti di eseguire effetti collaterali utilizzando componenti funzionali. Controlla anche il ciclo di vita dei componenti.

L'hook useeffect sfrutta due argomenti, una funzione e un array di dipendenze facoltativo.La funzione passata come primo argomento viene eseguita dopo il rendering iniziale del componente e poi di nuovo dopo ogni aggiornamento. È possibile indicare le variabili da cui dipende un effetto utilizzando l'array di dipendenza. Viene eseguita una nuova esecuzione dell'effetto se una delle variabili dell'array di dipendenza cambia.

Intrinsecamente l'hook useeffect è stato creato per affrontare le sfide affrontate durante il ciclo di vita dei componenti della classe ES6.Tuttavia, ora è diventato uno dei concetti fondamentali della reazione.

Con questo riassunto suciò che è useeffect in react , diamo ora un'occhiata alla sua sintassi.

Sintassi di base di useEffect() Hook

useEffect supporta due argomenti ; il secondo argomento è facoltativo. La sintassi è la seguente:

useEffect(<funzione>, <dipendenza>)

La funzione include la logica dell'effetto collaterale. Provoca l'esecuzione di una richiamata subito dopo l'aggiornamento del DOM.

La dipendenza contiene un array facoltativo di dipendenze dei tuoi effetti collaterali, ad esempio i valori di stato e oggetti di scena. Si noti che l'hook dell'effetto use esegue il callback solo se le dipendenze sono cambiate durante i rendering.

La sintassi serve al solo scopo di useEffect(). Ti consente di posizionare la logica dell'effetto collaterale all'interno della funzione di callback e quindi utilizzare l'argomento delle dipendenze per controllare quando è necessario eseguire l'effetto collaterale.

Puoi considerare la seguente sintassi quando implementi useEffect() Hook:

// importa useEffect

import { useEffect } da 'reagire';

funzione MioComponente() {

// lo chiama sopra il JSX restituito

// gli passa due argomenti, cioè un array e una funzione

usaEffetto(() => {

// funzione effetto

ritorno () => {

// funzione di pulizia

};

}, [/* array di dipendenze */]);

// logica di rendering dei componenti

}

}

Dai un'occhiata ai nostricorsi di tecnologia gratuitiper avere un vantaggio sulla concorrenza.

Montaggio e smontaggio di componenti con useEffect() Hook

Montaggio

La fase iniziale del ciclo di vita di un componente React prevede la creazione e l'inserimento di componenti nel DOM. Questa fase del ciclo di vita di reazione useeffect include il metodo del ciclo di vita componentDidMount, che viene eseguito quando il componente viene montato.

Ecco un esempio di montaggio di componenti utilizzando l'hook useEffect().

componentDidMount() {

console.log(“Il componente è stato montato con successo”);

this.setState({

caricato: vero

})

}

Nell'esempio precedente, componentDidMount consente di utilizzare setState. Quindi, puoi facilmente impostare e modificare lo stato nel metodo del ciclo di vita. Il metodo corrispondente utilizza chiamate API, chiama endpoint remoti e recupera i dati.

Smontaggio

Questo metodo del ciclo di vita di reazione useeffect gestisce la pulizia in un DOM.È come unafunzione di pulizia useeffect che rimuove un componente dal DOM.Si chiama smontaggio in React. Lo smontaggio utilizza un solo metodo del ciclo di vita, ovvero componentWillUnmount. Viene chiamato quando si desidera rimuovere un componente dal DOM.

componentWillUnmount() {

console.log("Il componente è stato smontato con successo");

}

Utilizzo di use effect() Hook per la gestione dei cambiamenti di stato

L' effetto useeffect viene eseguito dopo ogni rendering.Viene anche utilizzato per eseguire determinati codici in riconoscimento di un cambiamento di stato. Puoi controllare il tempo di esecuzione dell'effetto passando il secondo argomento in useEffect() Hook. Il secondo argomento funziona come un array di dipendenze, cioè, se le variabili corrispondenti vengono cambiate, l'effetto deve essere rieseguito. Si noti che lo stato è uno dei tipi di variabile.

La sezione seguente illustra un esempio per spiegare come l'effetto use hook gestisce i cambiamenti di stato.

Ad esempio, potresti voler eseguire un effetto collaterale basato su un valore "giorno". Supponiamo di avere un effetto collaterale per visualizzare un messaggio di saluto a seconda del valore del giorno. Il valore del giorno viene salvato in una variabile di stato.

Ogni volta che scegli un giorno, lo stato viene aggiornato. La modifica del valore di stato consente di aggiornare il messaggio di saluto. Dovresti passare la variabile di stato all'hook useEffect come sottoinsieme dell'array di dipendenza.

useEffect(() =>

{

// Effetto collaterale

}, [stato]);

Nell'esempio precedente di useeffect react native , l'effetto collaterale verrebbe eseguito se il valore della variabile di stato si aggiorna.

Esplora i nostri famosi corsi di ingegneria del software

Utilizzo di useEffect() Hook con API e richieste di rete

Puoi utilizzare l'hook 'useEffect()' con le API e le richieste di rete per recuperare i dati da un server e gestire gli errori. Ecco un esempio di come utilizzare 'useEffect()' con un'API e gestire gli errori di rete:

import React, { useState, useEffect } from 'react';

funzione MioComponente() {

const [data, setData] = useState(null);

const [errore, setError] = useState(null);

usaEffetto(() => {

funzione asincrona fetchData() {

Tentativo {

const risposta = wait fetch('https://api.example.com/data');

se (!risposta.ok) {

throw new Error('La risposta della rete non era ok');

}

const json = attendi risposta.json();

setData(json);

} cattura (errore) {

setError(errore);

}

}

recuperaDati();

}, []);

se (errore) {

return <div>Errore: {error.message}</div>;

}

se (! dati) {

return <div>Caricamento...</div>;

}

ritorno (

<div>

<p>{data.message}</p>

</div>

);

}

È possibile modificare questo esempio per includere qualsiasi funzionalità aggiuntiva necessaria per gestire le richieste di rete e le risposte API.

Advanced useEffect() Tecniche di hook

Una delle tecniche native useeffect react avanzate è la memorizzazione.È una tecnica di ottimizzazione in cui l'output di una chiamata di funzione viene memorizzato nella cache. Successivamente, lafunzione useeffect return lo restituisce quando lo stesso input viene alimentato di nuovo.

Un'altra ben nota tecnica di hook useEffect() è l'hook useMemo. Permette di calcolare un valore e memorizzarlo. La sua sintassi è:

import { useMemo } da 'reagire'

const memoizedValue = useMemo(() => computeExpensiveValue(x, y), [x, y])

useEffect() dipendenze hook

useEffect() Le dipendenze hook contengono un elenco di dipendenze del tuo effetto collaterale e comprendono anche valori di stato o prop. L'argomento delle dipendenze ti consente di catturare alcuni eventi del ciclo di vita del componente come un componente viene montato o un particolare valore di stato/prop viene aggiornato.

L'argomento dependencies consente di controllare l'ora in cui viene richiamato l'effetto collaterale, indipendentemente dal ciclo di rendering del componente.

Rendering condizionale con useEffect() Hook

useEffect Hook consente di inserire le condizioni all'interno dell'hook. Ecco un esempio.

usaEffetto(() => {

se (dovrebbe eseguire) {

// (lista di condizioni)

}

}, [dovrebbeEseguire])

È necessario menzionare le condizioni obbligatorie che si desidera eseguire nella funzione shouldExecute.

usa effect() Hook vs ComponentDidMount() e ComponentDidUpdate()

useEffect() Hook vs componentDidUpdate():

useEffect() Hook vs componentDidMount():

Errori comuni e best practice con useEffect() Hook.

Errori comuni

1. Non definire le dipendenze

useEffect viene eseguito ogni volta che viene eseguito il rendering di un componente. Pertanto, è necessario definire i valori che devono attivare un nuovo rendering. In caso contrario, la funzione useEffect può creare problemi di prestazioni.

2. Non ripulire dopo aver eseguito l'hook useEffect

useEffect può restituire una funzione di pulizia che viene eseguita quando il componente viene smontato. Non ripulire dopo l'uso L'effetto può creare perdite di memoria e altri problemi. Quindi, è importante utilizzare la funzione useeffect cleanup .

3. Utilizzo della funzione setState in useEffect senza dipendenza

Se aggiorni lo stato in useEffect, viene attivato un altro rendering. Questo può portare a un ciclo infinito. Per evitare ciò, devi sempre definire la variabile di stato che stai aggiornando come dipendenza in un hook useEffect.

Esplora i nostri corsi gratuiti di sviluppo software

Migliori pratiche:

• Se vuoi usare l'hook useEffect, assicurati di usarne solo uno per componente. Nel caso di più hook useEffect, tutti verrebbero eseguiti ogni volta che viene eseguito il rendering di un componente. Pertanto, può creare problemi di prestazioni e comportamenti imprevisti.
• Assicurarsi di non utilizzare l'hook useEffect all'interno di condizioni, cicli o funzioni nidificate. Se usi State inside for loop, allora React creerebbe una nuova variabile di stato ogni volta che il ciclo viene eseguito. Pertanto, porta a comportamenti inaspettati.
• Assicurati di non abusare dell'hook useEffect. Possono rendere difficile la lettura del codice e possono influenzare le prestazioni se utilizzate in modo eccessivo.
• Devi solo chiamare l'hook useEffect dalle funzioni React. Se lo chiami da un componente di classe, vedrai un errore.

Conclusione

È meglio usare useeffect in react se vuoi accedere facilmente alle proprietà e allo stato dei componenti senza scrivere codice aggiuntivo.Semplifica in modo significativo gli effetti collaterali nei componenti poiché semplifica l'esecuzione degli effetti collaterali quando lo stato o l'elica cambia. Puoi considerare gli aspetti e le migliori pratiche discussi sopra per assicurarti che i tuoi componenti React funzionino in modo ottimale.

L'apprendimento di competenze di sviluppo software impegnative è fondamentale nell'era attuale. Puoi dotarti di queste competenze all'avanguardia perseguendo il Master of Science in Computer Science di Grad presso LJMU . Il corso ti rende uno sviluppatore di software esperto impartendo competenze come Java, Python e specializzazione in campi correlati. L'apprendimento approfondito degli aspetti trattati in questo corso ti aiuta a esplorare opportunità di lavoro come sviluppatore javascript, ingegnere del software e ingegnere back-end.

Oltre a padroneggiare le capacità di sviluppo software, upGrad ti aiuta anche a migliorare la tua carriera di sviluppatore full-stack attraverso corsi come Executive PG Program in Full Stack Development from IIITB e Full Stack Software Development Bootcamp . Questi programmi forniscono piattaforme di apprendimento coinvolgenti che consentono ai candidati di acquisire competenze di sviluppo full-stack impegnative e aprire efficacemente la strada a una carriera di successo!