Состояние ReactJS

Состояниеявляется источником данных. Мы должны стараться сделать наше состояние как можно более простым и минимизировать количество компонент с состоянием. Например, если у нас есть 10 компонент, которые требуют данных из состояния, мы должны создать контейнерный компонент для хранения состояния всех компонент.

Использование состояния

Следующий пример кода показывает, как создать компонент с состоянием, используя синтаксис EcmaScript2016.

App.jsx

import React from 'react';
class App extends React.Component { constructor(props) { super(props); }
　　　　　　this.state = {
　　　　　　　　　header: "Header from state..."
　　　　　　　　　content: "Content from state..."
　　　　　　}
　　　}
　　　　　　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'));

Это приведет к следующим результатам.