インタラクティブと動的UI
Reactを使用したデータの表示については、既に学んでいることでしょう。 ここでは、インタラクティブなUIの作り方について見て行きましょう。
シンプルな例
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven't liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
React.render(
<LikeButton />,
document.getElementById('example')
);
イベント・ハンドリングと人工的なイベント
通常のHTMLで行う事と似た方法で、Reactでもキャメルケースのプロパティをイベントハンドラに渡すことが出来ます。 Reactは人工的なイベントシステムを実装することで、IE8とそれ以降で同じように全てのイベントが動作する事を保証してくれます。 つまり、Reactは仕様に沿ったイベントのバブルとキャプチャ方法を把握し、 あなたのイベントハンドラに渡されるイベントが、使用されているブラウザに関係なく、 W3Cの仕様と一致する事を保証してくれます。
もし、スマートフォンやタブレットのようなタッチデバイス上でReactを使用したい場合は、
React.initializeTouchEvents(true);を呼び出し、タッチ・イベントハンドリングを有効にして下さい。
内部構造: 自動バインディングとイベント委譲
React内部では、コードのパフォーマンスの向上と理解し易さを維持するために、幾つかの事を行っています。
コンポーネントはstateのマシーン
Reactは単なるstateのマシーンであると考えることが出来ます。 UIが様々なstateであり、それらのstateを描画するものであると考えると、 UIの一貫性を保つことが容易になります。
Reactでは、単純にコンポーネントのstateを更新すると、その新しいstateを基に新しいUIが描画されます。 Reactは、最も効率的な方法であなたのDOM更新の面倒を見てくれます。
Stateはどのように動作するか
データが変更されたことをReactに伝える共通の方法は、setState(data, callback)を呼び出すことです。
このメソッドはthis.stateにデータをマージして再描画を行うメソッドです。
コンポーネントの再描画が完了すると、任意のコールバックが呼び出されます。
ReactがUIを最新に保つための面倒を見てくれるため、ほとんどのケースでコールバックの提供は不要になるでしょう。
どのコンポーネントがStateを持つべき？
コンポーネントの多くは単にpropsからデータを取得し、それを描画するだけにするべきです。 ただし、時にはユーザーからの入力、サーバーのリクエスト、時間の経過などを受け付ける必要があるでしょう。 このような場合には、stateを使用します。
出来るだけ多くのコンポーネントをステートレスにすることを心がけて下さい。 これを行うことで、そのstateをロジックの重要部分へ隔離して冗長性を最小限にし、 アプリケーションを理解し易いものにします。
一般的なパターンは幾つかのデータを描画するだけのステートレスなコンポーネントを作成し、
それらの階層の上にpropsを通して階層の下の子にそのstateを渡すステートフルなコンポーネントを持つことです。
ステートフルなコンポーネントは全てのインタラクションなロジックをカプセル化する一方、
ステートレスなコンポーネントは宣言的な方法でデータの描画の面倒を見ます。
何をStateにするべきか？
stateには、UI更新のトリガに繋がる、コンポーネントのイベントハンドラが変更するかもしれないデータを含めるべきです。
実際のアプリケーションでは、このデータはとても小さくJSONにシリアライズ可能なものになる傾向があります。
ステートフルなコンポーネントを構築する際は、そのstateは可能な限り最小なものになるように考え、
それらのプロパティをthis.stateに格納するだけにします。
render()の内部は、このstateを基にする事を必要とする、その他の情報の単純な計算をするだけにします。
あなたは、この方法によるアプリケーション構築こそが、最上のアプリケーション構築に繋がると気づくでしょう。
何故なら、冗長な値または計算値をstateに追加することに対して、それをReactに処理させるのでは無く、
それらを同期して明確にする必要があると気づかせてくれるからです。(翻訳に自信なし)
何をStateにするべきではないか？
this.stateは、UIのステート(状態)を表す必要がある最小量のデータのみを含めるべきです。
そのため、次のようなものを含めるべきではありません。