Estado do ReactJS

Estadoé a fonte de dados. Devemos tentar manter nosso estado o mais simples possível e reduzir ao mínimo o número de componentes com estado. Por exemplo, se temos10Se um componente precisa de dados do estado, devemos criar um componente container para armazenar o estado de todos os componentes.

Uso do estado

O exemplo de código a seguir mostra como usar EcmaScript2016Criação de componentes com estado em sintaxe de grammar.

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{　constructor(props)　{　super(props);
　　　　　　this.state　=　{
　　　　　　　　　header:　"Cabeçalho do estado...",
　　　　　　　　　content:　"Conteúdo do estado..."
　　　　　　}
　　　}　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'));

Isso produzirá o seguinte resultado.