Potresti già conoscere gli hook di React e anche quali hook di base offre il framework. Gli hook ti consentono di gestire lo stato e altre funzionalità senza dover scrivere una classe. I ganci di base sono useState, useEffect, e useContext. In questo articolo imparerai a conoscere alcuni hook aggiuntivi che aggiungono un comportamento più complicato.

I ganci aggiuntivi che imparerai sono useRef e usaMemo.

useRef

Il useRef la funzione restituisce un oggetto ref mutabile e inizializza il suo .attuale proprietà all'argomento passato. Le persone spesso confondono l'uso di useRef gancio con useState gancio. Puoi istruire questo gancio per tenere il riferimento di un elemento HTML. Usando questo riferimento, puoi facilmente manipolare quell'elemento.

Il useRef hook ha solo una proprietà in esso: .attuale. React non esegue nuovamente il rendering della pagina quando il suo elemento cambia. Né viene eseguito nuovamente il rendering se si modifica il valore del file .attuale proprietà. Comprendiamo l'uso di questo hook con un esempio:

import React, { useState, useRef } from 'react';
esporta la funzione predefinita App() {
const count = useRef (null);
const [numero, setNumber] = useState (0);
const checkNumber = () => {
if (count.current.value < 10) {
count.current.style.backgroundColor = "rosso";
} altro {
count.current.style.backgroundColor = "verde";
}
};
Restituzione (


Inserisci un numero maggiore di 10

ref={count}
tipo = "testo"
valore={numero}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}>Click



);
}

Nel codice sopra, il colore dell'elemento di input cambia in base al numero inserito nella casella di input. Innanzitutto, assegna il risultato di usaRif() agganciare il contare variabile. Ci sono due elementi: input e il pulsante. L'elemento di input ha il valore di numero e il rif la proprietà del tag di input è contare per abbinare la variabile.

Quando si fa clic sul pulsante, il numero di controllo() la funzione viene chiamata. Questa funzione verifica se il valore di numero è maggiore di 10. Allora imposta il colore di sfondo dell'elemento di input usando il count.current.style.backgroundColor proprietà.

Imparentato: Fondamenti CSS: lavorare con i colori

usaMemo

L'hook useMemo ricalcolerà un valore memorizzato nella cache quando una qualsiasi delle sue dipendenze cambia. Questa ottimizzazione aiuta ad evitare calcoli costosi su ogni rendering.

La sintassi di usaMemo gancio è il seguente:

const memoizedValue = useMemo(() => computeExpensiveValue (a), [a]);

Per una migliore comprensione, consideriamo un esempio. Il codice seguente alterna i colori di due intestazioni. chiama il useState gancio per tenere traccia dei loro valori. Una funzione mostra se il colore è caldo o freddo in base al suo valore. Prima di restituire lo stato del colore, c'è un ciclo while che si ferma per circa un secondo. Questo è a scopo dimostrativo, per spiegare il vantaggio del usaMemo gancio.

import React, { useState, useMemo } from 'react';
esporta la funzione predefinita App() {
const [colore1, setColor1] = useState("blu");
const [colore2, setColor2] = useState("verde");
const toggleColor1 = () => {
restituire color1 "blu"? setColor1("rosso"): setColor1("blu");
};
const toggleColor2 = () => {
color2 "verde"? setColor2("arancione"): setColor2("verde");
};
const displayColor = () => {
var now = new Date().getTime();
while (new Date().getTime() < ora + 1000);
restituire color1 "blu"? "freddo": "caldo";
};
Restituzione (


Testo 1 colore: {color1}

È {displayColor()} colore

Cambia colore
Colore del testo 2: {color2}

Cambia colore



);
}

Quando fai clic su toggleButton1, dovresti notare un leggero ritardo mentre lo stato cambia. Nota che c'è anche un ritardo quando fai clic su toggleButton2. Ma questo non dovrebbe accadere, poiché la pausa di un secondo si verifica in displayColor. In questa pagina, i pulsanti dovrebbero essere in grado di agire in modo indipendente. Per raggiungere questo obiettivo, puoi utilizzare il usaMemo gancio.

Devi avvolgere il displayColor funzione in usaMemo gancio e passaggio colore1 nell'array delle dipendenze.

const displayColor = useMemo(() => {
var now = new Date().getTime();
while (new Date().getTime() < ora + 1000);
restituire color1 "blu"? "freddo": "caldo";
}, [colore1]);

Il usaMemo hook accetta una funzione e le dipendenze come parametri. Il usaMemo hook renderà solo quando una delle sue dipendenze cambia. È utile in situazioni in cui devi recuperare da un'API.

Cosa fare dopo aver imparato gli hook

Gli hook sono una funzionalità molto potente e sono comunemente usati nei progetti React. Offrono un grande potenziale di ottimizzazione. Puoi esercitarti con i ganci costruendo piccoli progetti come moduli o contatori di orologi.

Ci sono altri hook avanzati come useReducer, useLayoutEffect, e useDebugValue. Puoi impararli facendo riferimento alla documentazione ufficiale di React.

Unnati Bamania (10 Articoli Pubblicati)

Unnati è un entusiasta sviluppatore full stack. Ama costruire progetti utilizzando vari linguaggi di programmazione. Nel tempo libero ama suonare la chitarra ed è un'appassionata di cucina.

Altro da Unnati Bamania