ReactJS 状態(State)

State状態の来源です。状態をできるだけシンプルにし、状態を持つコンポーネントの数を最小限に抑えるようにしましょう。例えば、私たちが10コンポーネントが状態からのデータが必要な場合、すべてのコンポーネントの状態を保存するためのコンテナコンポーネントを作成する必要があります。

状態を使用

以下のサンプルコードでは、EcmaScriptを使用して状態を2016状態を持つコンポーネントを作成するための语法

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..."
　　　　　　}
　　　}　　　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'));

以下の結果が生成されます。