React ドキュメント 4_12
3.要素のレンダー
要素をDOMとして描画しており、要素のみが動いている
イミュータブル：作成後にその要素を変更出来ない
4.コンポーネントとprops
propsとは、コンポーネントに渡すデータ
コンポーネントはより小さな単位で扱うべき
(関数目線で)自分自身のpropsは変更してはいけない
5.stateとライフサイクル
stateはpropsに似ているが、コンポーネントによって管理されるプライベートなもの
マウント：DOMが描画されること
アンマウント：DOMが削除されること
stateは直接変更不可
コンストラクタ以外は
this.setState({comment: 'Hello'});
stateとpropsの同時更新は、引数を活用した使い方で
stateはローカルなもの
いかなるstateも必ずコンポーネントが所有。stateから生ずる全てのデータまたはUIは、ツリーの下のコンポーネントに作用
6.イベント処理
onClickなどのメソッド使うとき、
クラスのメソッドでは、thisを使いバインドして、アロー関数を使おう
イベントハンドラとは、処理と行動のつなぎ役
onClick="処理1"
7.条件付きレンダー
8.リストとkey
9.フォーム
制御されたコンポーネント＝Reactによって値が制御される入力フォーム要素
<textarea value{"〜〜〜"}>と表記
<select>は、初期値をstateに入れておく必要がある
10.stateのリフトアップ
複数のコンポーネントにまたがった共通stateを、一個レイヤー上げたコンポーネントで対応しよう
12.Reactの流儀
まずコンポーネントを分ける
静的なバージョンを作る。
└ユーザー操作を受け付けない画面
└stateは使わない
stateかpropsか
└使用する全データを把握
└以下参照
- 親から props を通じて与えられたデータでしょうか？ もしそうなら、それは state ではありません
- 時間経過で変化しないままでいるデータでしょうか？ もしそうなら、それは state ではありません
- コンポーネント内にある他の props や state を使って算出可能なデータでしょうか？ もしそうなら、それは state ではありません
props :（関数引数のように）コンポーネントへ渡される
state :（関数内で宣言された変数のように）コンポーネントの内部で制御される
stateをどこに配置するか
└stateを使用する全てのコンポーネントを把握
└下位コンポーネントに、propsとして送る
