React è un framework JavaScript front-end. Mentre costruire pagine HTML e gestirle può diventare noioso, React semplifica le cose suddividendo gli elementi sullo schermo e la loro logica in componenti.

React porta molto in tavola, ma una delle funzionalità più utili è la gestione dello stato. In questo articolo imparerai come gestire lo stato usando React Hooks. Prima di procedere oltre, questo articolo presuppone che tu conosca le basi di React.

Cosa sono gli hook in ReactJS?

L'hook è un nuovo concetto introdotto in React per la gestione dello stato e altro caratteristiche di React. Usando gli hook in React, puoi evitare di scrivere codice lungo che altrimenti userebbe le classi. L'esempio seguente mostra un esempio di useState gancio.

const [variabile, setVariable] = useState (valore iniziale);

qui il variabile è lo stato e il setVariable è la funzione che imposta lo stato. useState è l'hook che contiene il valore iniziale della variabile di stato. Non preoccuparti se questo non ha alcun senso per te. Alla fine di questo tutorial, avrai una solida conoscenza dei ganci.

Esistono due tipi di ganci:

• Ganci di base
  1. useState
  2. useEffect
  3. useContext
• Ganci aggiuntivi
  1. useRef
  2. usaMemo
  3. useReducer

useState()

Il useState hook aiuta a gestire lo stato. In precedenza, nello sviluppo di React, la gestione dello stato veniva eseguita utilizzando le classi. La sintassi dello stato è stata scritta all'interno del costruttore e ha utilizzato il questo parola chiave. Con l'introduzione degli hook React, gli sviluppatori hanno la libertà di gestire lo stato utilizzando componenti funzionali.

Puoi fare riferimento all'esempio precedente per la sintassi degli hook di React. L'esempio più semplice da spiegare useState() è l'esempio della variabile di conteggio:

importa {useState} da "react";
funzione App() {
const [count, setCount] = useState (0);
Restituzione (


Esempio di ganci

{contare}

setCount (conta+1)}>Aggiungi
setCount (count-1)}>Sottrai



);
}

Il useState hook ha una variabile e un metodo utilizzato per impostare il valore della variabile. Il useState hook accetta il valore iniziale dello stato come parametro. Puoi impostare qualsiasi valore per la variabile di conteggio usando il setCount metodo.

Ci sono due pulsanti nel codice sopra per aumentare e diminuire il valore del contare variabile. Durante l'incremento, puoi aggiungere +1 allo stato di conteggio corrente e -1 per decrementare il conteggio di 1.

useEffect

Il useEffect hook aggiorna lo stato sulla pagina web dopo ogni cambiamento di stato. Il useEffect hook è stato introdotto per rimuovere gli effetti collaterali dei componenti basati sulla classe. Prima dell'introduzione dei componenti basati sulle funzioni, i cambiamenti di stato venivano monitorati utilizzando i componenti del ciclo di vita: componenteDidMount e componenteDidUpdate. Il useEffect hook accetta un array di dipendenze. Tutte le modifiche nelle variabili di stato menzionate nell'array delle dipendenze vengono tracciate e visualizzate utilizzando il pulsante useEffect gancio.

Un classico esempio di utilizzo del useEffect gancio è recupero di dati da un'API o calcolare i Mi piace o le iscrizioni su un post.

useEffect(()=>{
// codice
},[array di dipendenze]);

Considerando l'esempio sopra

import { useState, useEffect } from "react";
funzione App() {
const [count, setCount] = useState (0);
useEffect(() => {
document.title = `Hai cliccato per ${count} volte`;
}, [contare]);
Restituzione (


Esempio di ganci

{contare}

 setCount (conta + 1)}>Aggiungi



);
}

Passando il contare variabile di stato in useEffect array di dipendenze, controlla se lo stato è cambiato o meno. Quindi imposta il titolo del documento sulla variabile di conteggio.

useContext

Il useContext hook aiuta a passare i dati attraverso il componente senza farlo manualmente tramite props. Rende l'utilizzo dell'API Context facile e veloce. Avrai una migliore comprensione dopo aver eseguito un esempio.

Innanzitutto, capisci come appare il codice senza usare Context. Come puoi vedere, devi passare il testo tramite props al componente figlio. Per evitare complessità, puoi usare il useContext gancio.

esporta la funzione predefinita App() {
let text = "Ciao, benvenuto a MUO";
Restituzione (






);
}
const ChildComponent = ({ testo }) => {
Restituzione 
{testo}
;
};

Innanzitutto, crea un Provider nel tuo file principale (App.js).

const Context = React.createContext (null);

Il App componente è il componente di livello superiore o il componente "padre". È necessario avvolgere l'intero componente nel e passa l'oggetto o i dati di cui desideri eseguire il rendering sul componente figlio.

esporta la funzione predefinita App() {
let text = "Ciao, benvenuto a MUO";
Restituzione (








);
}

Ora, crea un componente figlio e accedi al supporto di testo usando il useContext gancio. Passa il Contesto variabile usando createContext.

const ChildComponent = () => {
let text = useContext (Contesto);
console.log (testo);
Restituzione 
{testo}
;
};

Imparentato: Framework JavaScript che vale la pena imparare​​​​​

Molto altro da esplorare con React

Hai appena imparato le basi dei ganci. È una delle migliori caratteristiche di React e anche abbastanza amichevole per gli sviluppatori. React è uno dei migliori framework frontend da imparare oggi per opportunità di lavoro, creazione di app a pagina singola o semplicemente per ampliare le tue conoscenze di programmazione.

Parlando di ampliare le tue conoscenze, la gestione dello stato è solo un'abilità che gli sviluppatori di React devono esercitare. Altre caratteristiche chiave, come gli oggetti di scena, meritano altrettanto della tua attenzione.

Come utilizzare gli oggetti di scena in ReactJS

Se stai cercando suggerimenti su come utilizzare gli oggetti di scena in ReactJS, sei nel posto giusto.

Leggi Avanti

Circa l'autore