Reactガイドを読んでいくその19
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
React の流儀
昨日の続きです。
Step 2: Reactで静的なバージョンを作成する
昨日はコンポーネントの階層まで決まりました。
アプリケーションの実装に入っていきます。
まずはデータモデルを受け取ってUIの描画だけをし、ユーザ入力なしバージョンを作成するのが良いと書いてあります。 表示の実装とユーザ操作の実装を分けるのは重要な事項であり、静的なバージョンはタイプ量が多い代わりに考えることが少なく、実装を組み立てやすい。
静的なバージョンを作る際は他のコンポーネントを再利用しつつそれらにpropsを通じてデータを渡酢ようなものを作る。
静的なバージョンを作る時にはstateを使わず、propsで組むことに心がける。
stateはユーザ操作や時間経過などで動的に変化するデータを扱うものなので、静的なバージョンでは不要。
コンポーネントの組み方はボトムアップでもトップダウンでもどちらでも可能。
大規模な場合は開発しながらテストを書き、ボトムアップで進める方が簡単だったりする。
ここまで検討が終わり実装できると、データモデルを描画する再利用可能なコンポーネントのライブラリが完成する。
このバージョンでは最上位のFilterableProductTableがデータをpropsとして受け取り、元データを更新して ReactDOM.render() を呼び出すものになります。
props vs state
propsもstateもプレーンなJavaScriptのオブジェクト。
いずれもrenderへ影響を及ぼす情報を持っているものの、その機能は異なる。
・props(properties) = 関数引数のようにコンポーネントへ渡される
・state = 関数内で宣言された変数のようにコンポーネントの内部で制御される
詳しくはここを見てくれと。
github.com
上に書いてあるように基本的な部分は一緒だけど、Reactでの使われ方が異なる。
表になっているのがわかりやすかった。
親あるいは子コンポーネントから見たとき更新できるか否か、
コンポーネント内で更新できるかどうかが肝になっている。
明日は「Step 3: UI 状態を表現する必要かつ十分な state を決定する」です。
今日はここまで。
