Tenere traccia dello stato di un’applicazione è il modo in cui un’applicazione a pagina singola (SAP) registra le modifiche e le rende all’utente. A differenza di un framework model, view, controller (MVC), i SAP non reindirizzano l’utente e quindi necessitano di un modo per gestire le modifiche provenienti dal lato client. Per rivedere i framework MVC, fare riferimento a questa guida.
In React, i componenti stessi possono gestire il proprio stato e rifare il rendering di conseguenza. Questo viene fatto tramite i metodi del ciclo di vita, che sono discussi in modo approfondito qui. Ai fini di questo articolo, daremo un’occhiata a come cambiare lo stato usando setState.
Questa guida presuppone una familiarità di base con React. Per rivedere o apprendere le basi di React, questo articolo elenca alcune delle migliori risorse di apprendimento di React.
Cos’è React setState?
Il metodo React setState è come modificare lo stato di un componente con stabilità. Ci sono alcune linee guida specifiche per cambiare stato in React.
- setState può essere chiamato solo all’interno di un componente di classe. I componenti della classe chiamano il metodo
constructor()
e impostano uno stato iniziale. Quindi possiamo cambiare lo stato più in basso chiamando setState.
Ci sono due diversi tipi di componenti in React. C’è la componente funzionale e la componente di classe. Per i nostri scopi, ci riferiamo solo ai componenti della classe. Per un’ulteriore revisione, consulta questo articolo sulle differenze tra componenti funzionali e di classe. - Chiamando solo setState in un componente di classe, possiamo fare riferimento direttamente al componente stesso usando la parola chiave this. Chiamare
this.setState()
è la migliore pratica e garantisce che il tuo codice non si interrompa. - Non modificare direttamente lo stato. La modifica diretta dello stato non si registrerà su React per eseguire nuovamente il rendering. Il punto centrale del cambiamento di stato è attivare un re-rendering di quel componente per riflettere le modifiche all’utente.