このまとめを作ったモチベーション
他の言語など平行で作業をしていると、ReactNativeに戻って来たときに忘れてしまっていて、いろいろな概念を何度も調べて、思い出しながら進める羽目になったため
このまとめでやりたいこと
何もかも忘れて呆けた状態でReactNativeに戻って来たとしても、1ページで基本概念を思い出せるようにしたい
Component
Componentとは
状態(state)を持ったビュー(View)のこと。Reactの基本単位であり、Reactでは複数のComponentを組み合わせてUIを作成する
Componentのライフサイクルとは
全てのComponentが持っている、生成から破棄までの一連のサイクル
なぜComponent単位で扱うのか
JQueryなど従来のJavaScriptフレームワークのように、部分的な変更だけで全ての画面を破棄し、生成し直すのは高コストだから（これを従来のDOMと区別して、仮想DOMという)
propsとstate
propsとstateとは
それぞれ役割の異なるオブジェクト
なぜpropsとstateを使うのか
Component間で値のやり取りをするため
propsとstateの違いとは
props
- 主にComponentの外部から渡された初期値を受け持つオブジェクト
- 一度渡された値は内部から変更はできない定数
- Componentを呼び出す時にJSXの属性値として渡す
- 通常Componentが生成されてから破棄されるまで一貫した値を持つ
- 別の値を代入したい場合は、一度Componentを破棄して再生成するか、親要素から新しい値を与えることになる
state
- Component内部で管理される変数
- Component内外でのアクションに応じて頻繁に変更される
- ES6の文法ではコンストラクタの内部で初期値を設定し、以後専用の関数を通じて変更される
- 初期値はプログラマが事前にハードコードすることもあれば、propsを通じて外部から与えられることもある
- 一度Componentが作成されたあとは、stateの変化に応じてDOM要素が生成・破棄される
- ReactのViewは基本的にstateに依存している