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 importagganciare da react.

Qui stiamo usando useStateHook 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 .