Reactエレメント、コンポーネント、そしてインスタンス
React Components, Elements, and Instances - React Blog
を読んだメモ
エレメント（要素）
- エレメントは、コンポーネントインスタンスまたはDOMノードを記述する、普通のオブジェクト
- エレメントは、実際のインスタンスではない
- エレメントは、何を画面上に見たいかReactに伝えるための手段（記述）
- エレメントは、コンポーネントのタイプを表す
typeフィールドと、そのプロパティを表すpropsフィールドから成る*1。- 子要素があれば、それも含むことになる
- エレメントは、記述のためのイミュータブルなオブジェクトに過ぎない
DOMエレメントとコンポーネントエレメント
DOMエレメント
- エレメントの
typeが文字列であるとき、エレメントはそのタグ名をもつDOMノードを表す。エレメントのpropsフィールドは、そのDOMノードの属性に対応する - 子要素も親要素も単なる記述に過ぎず、記述した時点では画面上のものへの参照を一切持たない
- 画面上に見たいDOMを記述するエレメント
コンポーネントエレメント
- エレメントの
typeは文字列以外にも、Reactコンポーネントに一致するクラスか関数もとれる - コンポーネントを記述するエレメントもまたエレメント
- これにより継承(is-a)とコンポジション(has-a)関連を表現できる
- 画面上に見たいコンポーネントを記述するエレメント
DOMエレメントとコンポーネントエレメントの関係
- Reactはコンポーネントエレメント（
typeが関数もしくはクラスであるエレメント）を見つけると、そのコンポーネントが、与えられたpropsと共にどんなエレメントを吐き出すのかをたずねる- ( Reactコンポーネントは、propsを入力にとり、エレメントツリーを出力する )
- Reactはこのプロセスを、最終のDOMタグになるまで繰り返す
コンポーネント
- コンポーネントは、エメレントツリーをカプセル化するもの
- Reactコンポーネントは、propsを入力にとり、エレメントツリーを出力する
- Reactコンポーネントが返すエレメントツリーはDOMエレメントとコンポーネントエレメントの両方を含みうる
- コンポーネントはクラスもしくは関数
- クラスはもう少し機能が豊富だけど、Reactからすればどちらも基本的にはコンポーネント
- どちらもpropsを入力にとり、エレメントツリーを出力する
画面に見たいものを記述すれば、そのインスタンスの管理（作成、更新、削除）はReactがよしなにやってくれる。
インスタンス
- Reactにおいては、他のオブジェクト指向UIフレームワークに比べてインタンスはさほど重要でない
- クラスとして宣言されたコンポーネントのみがインタンスを持つ。関数のコンポーネントはインスタンスを一切持たない
- プログラマが直接インスタンスを作ることはない。 Reactが作ってくれる
- インスタンスは、コンポーネントクラス内で
thisとして参照されるもの
*1:説明の簡単のために省かれたが、実際はもう一つフィールドがある
