ReactJS コンポーネント(Components)

この章では、コンポーネントを組み合わせてアプリケーションを簡単にメンテナンスする方法を学びます。この方法により、ページの残りの部分に影響を与えずにコンポーネントを更新および変更することができます。

ステートを持たないコンポーネントのインスタンス

以下の例では、最初のコンポーネントはAppです。このコンポーネントはHeaderとContentの所有者です。HeaderとContentをそれぞれ作成し、それらをAppコンポーネントのJSXツリーに追加しています。アプリケーションコンポーネントのみをエクスポートする必要があります。

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<Header/>
　　　　　　　　　　　　<Content/>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Header　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Header</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Content　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h2>Content</h2>
　　　　　　　　　　　　<p>The　content　text!!!</p>
　　　　　　　　　</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'));

上記のコードは以下の結果を生成します。

ステートを持つコンポーネントのインスタンス

この例では、所有者コンポーネント(App)の状態を設定します。Header コンポーネントは前の例と同様に追加されますが、状態が必要ないためです。tableとtbody要素を作成し、contentではなくそれを使用します。 タグを見て、これらの要素にデータ配列の各オブジェクトに動的にTableRowを挿入するようにします。

使用しているECMAScriptの 2015矢印記法（=>）は古いJavaScriptの文法よりもきれいに見えます。これにより、要素を作成するために少ないコード行を使用することができます。多くの要素を含むリストを作成する際に特に有用です。

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{　　　constructor()　{　　　　　　super();
　　　　　　this.state　=　{
　　　　　　　　　data:　
　　　　　　　　　[
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":1,
　　　　　　　　　　　　　　　"name":"Foo",
　　　　　　　　　　　　　　　"age":""}20"
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":2,
　　　　　　　　　　　　　　　"name":"Bar",
　　　　　　　　　　　　　　　"age":""}30"
　　　　　　　　　　　　},
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　"id":3,
　　　　　　　　　　　　　　　"name":"Baz",
　　　　　　　　　　　　　　　"age":""}40"
　　　　　　　　　　　　}
　　　　　　　　　]
　　　　　　}
　　　}
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<Header/>
　　　　　　　　　　　　<table>
　　　　　　　　　　　　　　　<tbody>
　　　　　　　　　　　　　　　　　　{this.state.data.map((person,　i)　=>　<TableRow　key　=　{i}　
　　　　　　　　　　　　　　　　　　　　　data　=　{person}　/>)}
　　　　　　　　　　　　　　　</tbody>
　　　　　　　　　　　　</table>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Header　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Header</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　TableRow　extends　React.Component　{　　　render()　{
　　　　　　return　(
　　　　　　　　　<tr>
　　　　　　　　　　　　<td>{this.props.data.id}</td>
　　　　　　　　　　　　<td>{this.props.data.name}</td>
　　　　　　　　　　　　<td>{this.props.data.age}</td>
　　　　　　　　　</tr>
　　　　　　);
　　　}
}
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'));

注意：map()関数内でkey = { i }を使用しています。これにより、Reactは必要な要素のみを更新し、リストが変更されたときに全体を再レンダリングするのではなく、これは大量の動的要素生成に対して大きなパフォーマンス向上となります。