Come ottimizzare le prestazioni del modulo in React con useRef e useCallback Hooks

React è diventato uno dei framework più popolari per la creazione di interfacce utente. Molti sviluppatori front-end preferiscono la libreria JavaScript per la sua efficacia, versatilità e scalabilità. Ma un modulo web può ancora causare problemi di prestazioni se non lo ottimizzi correttamente.

React ha gli hook useRef e useCallback, che possono aiutare riducendo gli aggiornamenti e i re-rendering non necessari.

Esplora le applicazioni più efficaci di questi hook e velocizza i tuoi moduli React.

Comprensione degli hook useRef e useCallback

Due delle funzionalità di miglioramento delle prestazioni più efficaci di React sono gli hook useRef e useCallback.

IL usoRif hook genera un riferimento mutabile che può persistere in numerosi rendering di componenti. Gli usi comuni includono l'accesso agli elementi DOM, l'archiviazione di uno stato che non attiva un nuovo rendering e la memorizzazione nella cache di calcoli costosi.

È possibile utilizzare la funzione di memoria efficiente, usaRichiamata, come hook per migliorare la funzionalità dei componenti che dipendono dai componenti figli. Di solito usi questo metodo per i gestori di eventi e altre routine che vengono trasmesse come oggetti di scena.

Problemi comuni di prestazioni dei moduli in React

Moduli in React potrebbero avere problemi di prestazioni a causa della grande quantità di input dell'utente e modifiche che ottengono. Tempi di risposta lenti, re-rendering non necessari e cattiva gestione dello stato sono problemi frequenti.

Questi problemi sono in genere causati da quanto segue:

• Re-rendering non necessari: un componente può rallentare l'applicazione con re-rendering non necessari a causa di modifiche agli oggetti di scena o alle espressioni che non hanno alcun impatto sul risultato.
• Calcoli costosi: un componente potrebbe ridurre le prestazioni dell'applicazione se esegue calcoli costosi per ogni rendering.
• Gestione dello stato inefficace: una gestione dello stato inefficace da parte di un componente può portare a inutili aggiornamenti e re-rendering.

Come utilizzare useRef e useCallback Hooks per l'ottimizzazione dei moduli

Esaminiamo come sfruttare gli hook useRef e useCallback di React per velocizzare i nostri moduli.

Accesso agli elementi del modulo con useRef

IL usoRif hook consente l'accesso agli elementi del modulo senza comportare un nuovo rendering. Ciò è particolarmente utile per progetti complessi con diversi componenti. Ecco un esempio:

importare Reagisci, { useRef } da'reagire';
funzioneModulo() {
cost inputRef = useRef(nullo);
funzionehandleSubmit(evento) {
evento.preventPredefinito();
cost inputValue = inputRef.current.value;
consolare.log (valoreInput);
 }
ritorno (
<moduloonSubmit={handleSubmit}>
<ingressotipo="testo"rif={inputRef} />
<pulsantetipo="invia">Inviapulsante>
modulo>
 );
}

Questo esempio fa riferimento al componente di input utilizzando l'hook useRef. È possibile accedere al valore di input senza dover eseguire nuovamente il rendering dopo aver inviato il modulo.

Ottimizza i gestori di eventi con useCallback

IL usaRichiamata hook ti permette di farlo Memoize gestori di eventi e altre funzioni che trasmetti ai componenti figlio come oggetti di scena. Di conseguenza, potrebbe non essere necessario eseguire nuovamente il rendering dei componenti figlio. Ecco un esempio:

importare Reagisci, {useCallback, useState} da'reagire';
funzioneModulo() {
cost [valore, setValue] = useState('');

cost handleChange = useCallback((evento) => {
 setValue (evento.target.value);
 }, []);
cost handleSubmit = useCallback((evento) => {
 evento.preventDefault();
consolare.log (valore);
 }, [valore]);
ritorno (


"testo" value={value} onChange={handleChange} />
"invia">Invia</button>
 </form>
 );
}

Questo esempio utilizza l'hook useCallback per memoizzare il file handleChange E handleSubmit funzioni. Questo può aiutare a prevenire il re-rendering non necessario del pulsante e dei componenti informativi.

Ottimizzazione del modulo con useRef e useCallback Hooks

Diamo un'occhiata ad alcuni esempi reali di come velocizzare i form in React usando gli hook useRef e useCallback.

Ingresso antirimbalzo

L'antirimbalzo dell'input è una tecnica di ottimizzazione frequente per migliorare le prestazioni del modulo. Implica il ritardo nell'uso di una funzione fino a quando non è trascorso un certo periodo di tempo dalla sua invocazione. L'esempio seguente utilizza l'hook useCallback per eseguire il debug di handleChange metodo. Questa tecnica potrebbe migliorare la velocità dell'elemento di input e aiutare a evitare aggiornamenti non necessari.

importare Reagisci, {useCallback, useState} da'reagire';
funzioneModulo() {
cost [valore, setValue] = useState('');
cost debouncedHandleChange = useCallback(
 rimbalzo((valore) => {
consolare.log (valore);
 }, 500),
[]
 );
funzionehandleChange(evento) {
valore impostato(evento.bersaglio.valore);
debouncedHandleChange(evento.bersaglio.valore);
 }
ritorno (
<modulo>
<ingressotipo="testo"valore={valore}onChange={handleChange} />
modulo>
 );
}
funzionerimbalzare(funzione, aspetta) {
permettere tempo scaduto;
ritornofunzione (...arg) {
 clearTimeout (timeout);
 timeout = setTimeout(() => {
 funzione.applica(Questo, argomenti);
 }, Aspettare);
 };
}

Questo esempio utilizza la funzione antirimbalzo per posticipare l'esecuzione di handleChange metodo di 500 millisecondi. Ciò potrebbe migliorare la velocità dell'elemento di input e aiutare a evitare aggiornamenti non necessari.

Inizializzazione pigra

L'inizializzazione lazy è una tecnica per rinviare la creazione di risorse costose finché non sono realmente necessarie. Nel contesto dei moduli, è utile inizializzare uno stato che viene utilizzato solo quando il modulo viene inviato.

L'esempio seguente inizializza pigramente il file formState oggetto utilizzando l'hook useRef. Ciò può migliorare le prestazioni del modulo rinviando la creazione dell'oggetto formState fino a quando non è effettivamente necessario.

importare Reagisci, {useRef, useState} da'reagire';
funzioneModulo() {
cost [valore, setValue] = useState('');
cost formStateRef = useRef(nullo);
funzionehandleSubmit(evento) {
evento.preventPredefinito();
cost formState = formStateRef.current || {
 campo1: '',
 campo2: '',
 campo3: '',
 };
consolare.log (formState);
 }
funzionehandleInputChange(evento) {
valore impostato(evento.bersaglio.valore);
 }
ritorno (
<moduloonSubmit={handleSubmit}>
<ingressotipo="testo"valore={valore}onChange={handleInputChange} />
<pulsantetipo="invia">Inviapulsante>
modulo>
 );
}

Questo esempio usa l'hook useRef per inizializzare pigramente l'oggetto formState. In questo modo è possibile migliorare le prestazioni del modulo posticipando la generazione dell'oggetto formState fino a quando non sarà effettivamente necessario.

Best practice per l'utilizzo degli hook useRef e useCallback

Per massimizzare l'utilità degli hook useRef e useCallback, attenersi alle seguenti pratiche consigliate:

• Per accedere agli elementi DOM e ottimizzare i calcoli che richiedono tempo, utilizzare usoRif.
• Ottimizza i gestori di eventi trasmessi dall'elica e altri metodi utilizzando usaRichiamata.
• Per ricordare le funzioni ed evitare di rendere i componenti figlio due volte, usa usaRichiamata.
• Con l'antirimbalzo, puoi migliorare le prestazioni del modulo e prevenire aggiornamenti non necessari.
• Fai in modo che le risorse costose aspettino fino a quando non sono effettivamente necessarie utilizzando l'inizializzazione lazy.

Seguendo queste best practice, puoi creare componenti veloci ed efficienti che offrono un'esperienza utente fluida e migliorano le prestazioni delle tue app React.

Ottimizza le prestazioni dei moduli in React

Gli hook useRef e useCallback sono strumenti fantastici che possono aiutare a ridurre i re-rendering e gli aggiornamenti non necessari, il che può migliorare le prestazioni dei moduli.

Sfruttando correttamente questi hook e seguendo le migliori pratiche come l'antirimbalzo dell'input e l'inizializzazione pigra di risorse costose, è possibile sviluppare moduli veloci ed efficienti.