Ganci di reazione
Gli hook sono stati aggiunti a React nella versione 16.8.
Gli hook consentono ai componenti della funzione di accedere allo stato e ad altre funzionalità di React. Per questo motivo, i componenti di classe generalmente non sono più necessari.
Sebbene gli Hook generalmente sostituiscano i componenti delle classi, non ci sono piani per rimuovere le classi da React.
Cos'è un gancio?
Gli hook ci consentono di "agganciare" le funzionalità di React come i metodi dello stato e del ciclo di vita.
Esempio:
Ecco un esempio di Hook. Non preoccuparti se non ha senso. Entreremo più nel dettaglio nella prossima sezione .
import React, { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
<button
type="button"
onClick={() => setColor("red")}
>Red</button>
<button
type="button"
onClick={() => setColor("pink")}
>Pink</button>
<button
type="button"
onClick={() => setColor("green")}
>Green</button>
</>
);
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
Devi import
agganciare da react
.
Qui stiamo usando useState
Hook per tenere traccia dello stato dell'applicazione.
Lo stato si riferisce generalmente ai dati o alle proprietà dell'applicazione che devono essere monitorati.
Regole del gancio
Ci sono 3 regole per gli hook:
- Gli hook possono essere chiamati solo all'interno dei componenti della funzione React.
- Gli hook possono essere richiamati solo al livello superiore di un componente.
- Gli hook non possono essere condizionali
Nota: gli hook non funzioneranno nei componenti della classe React.
Ganci personalizzati
Se hai una logica stateful che deve essere riutilizzata in più componenti, puoi creare i tuoi Hook personalizzati.
Andremo più nel dettaglio nella sezione Ganci personalizzati .