Reactガイドを読んでいくその20

これは

Reactのガイドを読んでいく記事です。

昨日の続きです。

Reactのstateを使ってUIをインタラクティブなものにする。
まずは作ろうとしているアプリに求められる最小の更新構成を考える。

ここで重要なのは、DRY (don’t repeat yourself)の原則です。アプリケーションが必要としている最小限の状態を把握しておき、他に必要なものが出てきたら、そのとき計算すればよいのです。なので、実装より前に必要なのはこれまでやって作業を見て、最小構成を探す事になる。

今例で作成しているアプリでは以下の様なデータがある
　・元となる商品のリスト
　・ユーザが入力した検索文字列
　・チェックボックスの値
　・フィルタ済みの商品リスト

stateを考えるにあたり以下の様なものはstateではない
　・propsを通じて親から与えられたデータ
　・時間経過で変換しないままのデータ
　・コンポーネント内にある他のpropsやstateを使って検出可能なデータ

上記のことを踏まえて今回作成しているアプリでは以下の様になる。
　・元となる商品のリスト→ 非state
　・ユーザが入力した検索文字列→ state
　・チェックボックスの値→ state
　・フィルタ済みの商品リスト→ 非state

明日は「Step 4: state をどこに配置するべきなのかを明確にする」です。

今日はここまで。