React (Virtual) Dom Terminology
React にはコアな型がある。この型同士の関連性をすぐに忘れてしまうので、整理してみた。
基本的には、公式サイトを図解した形。
この表記は、サイトの引用文です。
コアな型の関連性
このような形で繋がっている。矢印の始点と終点は、生成の材料と生成されるものという関係がある。
各々の型で重要なポイント
React Elements
ReactElements are not to be confused with DOM Elements. A ReactElement is a light, stateless, immutable, virtual representation of a DOM Element. It is a virtual DOM.
ReactElementはDOM要素ではない。軽量、ステートレス、イミュータブルな仮想DOMである。
React Components
コンストラクタ(ReactClass)とインスタンス(ReactComponent)に分けて考える。
コンストラクタ
React.createClass()の戻り値として、コンストラクタが生成される。
// 型シグネチャ
ReactClass createClass(object specification)
これをReact.createElement() に渡すと、ReactElementが生成される。
var element = React.createElement('MyComponent');
JSX記法を用いて、
var element = <MyComponent />;
のようにも書ける。
通常のプロトタイプベースのクラスと異なる点は、newしないこと。上述のReact.createElement()を用いる。
インスタンス
When this is passed to ReactDOM.render, React will call the constructor for you and create a ReactComponent, which is returned.
ReactElementをReactDOM.render()に渡すと、ReactComponentが生成される。
The render method of a ReactComponent is expected to return another ReactElement. This allows these components to be composed. Ultimately the render resolves into ReactElement with a string tag which instantiates a DOM Element instance and inserts it into the document.
このReactComponentインスタンスは、render()メソッドを呼び出すことで、元になったものとは別のReactElementを生成できる。
最終的に、render()メソッドはDOMを生成するためのタグ要素に分解し、ドキュメントに挿入する。