Come abbiamo visto nelle due lezioni precedenti, possiamo utilizzare il metodo render() per disegnare elementi nel DOM, e possiamo passare delle variabili al metodo render utilizzando il costruttore ed assegnando delle variabili all’oggetto Component. Per esempio:
import React from 'react'; import { render } from 'react-dom'; class App extends React.Component { constructor(){super();this.nome = "Marco"; } render(){ return( <div> <h1>Hello {this.nome}</h1> <h2>Ciao {this.nome}</h2> </div> ) } } render(<App/>, document.getElementById('app'));
Questo tipo di variabile va utilizzato quando vogliamo solamente salvare dei dati nel Component. Se invece vogliamo un tipo di dato più particolare che rappresenti lo stato del Component, possiamo fare uso di this.state
this.state è una variabile molto speciale nel modo di React, infatti questa viene utilizzata per controllare lo stato di un Component. Per esempio: se immaginiamo di avere un Component che rappresenti un orologio, possiamo utilizzare this.state per rappresentare il valore dell’ora attuale.
Come regola generale vogliamo utilizzare this.state solamente quando il suo valore ha effetto internamente al Component e non ha effetto su gli altri Component dell’applicazione React. Se questo non è il caso, vogliamo utilizzare Props. (lezione successiva)
Come inizializzare il valore di this.state
Il valore di this.state può essere specificato in due modi:
- Con this.state = {"nome": valore}
- Con this.setState({"nome": valore})
L’unico momento in cui va utilizzato il metodo 1, è nella inizializzazione del Component, ovvero nel Constructor.
import React from 'react';
import { render } from 'react-dom';
class App extends React.Component {
constructor(){
super();
this.state = {
nome : "Giovanni"
};
}
render(){
return(
<h1>Ciao {this.state.nome}</h1>
)
}
}
render(<App/>, document.getElementById('app'));
Come vedete abbiamo inserito in this.state, una variabile chiamata nome con valore “Giovanni”.
Per accedere a questa variabile nel metodo render(), utilizziamo {this.state.nome}
Ok ora che abbiamo visto come utilizzare this.state, è il momento del colpo di scena!
La bellezza nell’utilizzare state con React sta nel fatto che in qualsiasi momento in cui il valore di state viene modificato, il DOM verrà aggiornato in tempo reale senza eseguire alcun refresh della pagina. Inoltre: non solo il motore React non esegue il refresh , ma ri-disegna sul DOM solamente gli elementi che sono cambiati. Questo ci porta ad un incredibile miglioramento di prestazioni.
Vediamo come funziona l’aggiornamento del DOM in tempo reale
In React, il DOM viene aggiornato, quando viene eseguito il metodo setState();
Questo metodo deve essere utilizzato quando vogliamo cambiare il valore di this.state nella nostra applicazione.
Per fare un esempio, utilizziamo un timer per cambiare il valore di this.state.nome da Giovanni a Luca.
Potete vedere il codice da questo JSFiddle:
Se salviamo questo codice e andiamo a visualizzarlo nel browser, possiamo vedere che dopo un secondo il nome cambia da Giovanni a Luca, senza che ci sia un refresh del browser. Nel JSFiddle potete navigare al tab Result per vedere gli effetti di questo codice.
Ora sapete come utilizzare this.state per salvare dati relativi allo stato del vostro Component, e come fare un aggiornamento del DOM in tempo reale utilizzando setState();
Nella prossima parte del corso andremo a vedere come utilizzare un'altro metodo molto comune per salvare e passare dati relativi alle nostre applicazioni React.
Spero questa guida vi sia stata d'aiuto, se avete riscontrato alcun problema potete commentare e vi risponderò appena posso.
CI vediamo alla prossima :)