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を生成するためのタグ要素に分解し、ドキュメントに挿入する。