Stato(State)ReactJS

Statoè la fonte dei dati. Dovremmo cercare di mantenere lo stato il più semplice possibile e ridurre al minimo il numero di componenti con stato. Ad esempio, se abbiamo 10 componenti che necessitano di dati dallo stato, dovremmo creare un componente contenitore per salvare lo stato di tutti i componenti.

Uso dello stato

Il seguente esempio di codice mostra come creare componenti con stato utilizzando la sintassi EcmaScript2016.

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{　　constructor(props)　{　　super(props);
　　　　　　this.state　=　{
　　　　　　　　　header:　"Intestazione　dal　stato...",
　　　　　　　　　content:　"Contenuto　dal　stato..."
　　　　　　}
　　　}　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.state.header}</h1>
　　　　　　　　　　　　<h2>{this.state.content}</h2>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App　/>,　document.getElementById('app'));

这将产生以下结果。