Reactの専門用語には、5つに分類される核となる重要な型が存在します。

• React要素 (ReactElement) / ReactElement Factory
• Reactノード(ReactNode)
• Reactコンポーネント(ReactComponent) / ReactComponent Class

React要素(ReactElement)

Reactで主要な型となるのは、ReactElementです。 これはtype、props、key、refの4つのプロパティを持ち、 メソッドを持たず、prototypeには何もありません。

React.createElementを通して作成することが出来ます。

var root = React.createElement('div');

DOM内に新しいツリーを描画するにはReact要素を作成し、 通常のDOM要素(HTMLElementまたはSVGElement)に沿ってそれらをReact.renderに渡します。 React要素をDOM要素と混在しないようにして下さい。 React要素は、軽量、ステートレス、イミュータブル(不変)なDOM要素の仮想表現です。 これが仮想DOMです。

React.render(root, document.getElementById('example'));

DOM要素にプロパティを追加するには、2番目の引数としてプロパティオブジェクトを渡し、子要素は3番目の引数として渡します。

var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
React.render(root, document.getElementById('example'));

もしReactのJSXを使用しているのであれば、これらReact要素が作成されるため、記と下記の処理は同じ結果になります。

var root = <ul className="my-list">
             <li>Text Content</li>
           </ul>;
React.render(root, document.getElementById('example'));

ファクトリー(Factories)

ReactElementファクトリーは、特定の型のプロパティを持つReactElementを生成する単純な関数です。 Reactはファクトリーを作成するための組み込みヘルパーを持ちます。 これは非常に便利です。下記の例を確認して下さい。

function createFactory(type) {
  return React.createElement.bind(null, type);
}

これは毎回React.createElement('div')とタイピングしなくても済むような便利な略記の生成を可能にしてくれます。

var div = React.createFactory('div');
var root = div({ className: 'my-div' });
React.render(root, document.getElementById('example'));

Reactは一般的なHTMLタグ用の組み込みファクトリーを予め用意しています。

var root = React.DOM.ul({ className: 'my-list' },
             React.DOM.li(null, 'Text Content')
           );

もしJSXを使用しているのであれば、ファクトリーは必要無いでしょう。 JSXはReact要素を作成するための便利な略記を提供しています。

Reactノード(ReactNode)

ReactNodeは下記のいずれかになります。

• ReactElement
• string (別名、ReactText)
• number (別名、ReactText)
• ReactNodeの配列 (別名、ReactFragment)

これらは他のReactElementの子要素を表すプロパティとして使用されます。 RectElementのツリーを生成するのに有用です。

Reactコンポーネント(ReactComponent)

ReactElementのみでReactを使用することは出来ますが、それでは真の意味でReactを活用しているとは言えません。 通常であれば、埋め込みstateを含んだカプセル化のためにReactComponentを使用したいと考えるでしょう。

ReactComponentクラスは単純なJavaScriptのクラス(または、"コンストラクタ関数")です。

var MyComponent = React.createClass({
  render: function() {
    ...
  }
});

このコンストラクタの実行で、少なくともrenderメソッドを持つオブジェクトが返されることが期待されます。 このオブジェクトがReactComponentと呼ばれるものです。

var component = new MyComponent(props); // 決してこのような処理を書かないで下さい

通常であればテスト以外であなたがコンストラクタを呼び出すことは無いでしょう。 これはReactが呼び出してくれます。

代わりにReactElementを取得するために、ReactComponentクラスをcreateElementに渡します。

var element = React.createElement(MyComponent);

JSXであれば、次のようにします。

var element = <MyComponent />;

これがReact.renderに渡されると、Reactはコンストラクタを呼び出し、 ReactComponentが生成されてこれが返されます。

var component = React.render(element, document.getElementById('example'));

同じ型のReactElementと同じDOM要素のコンテナのReact.render呼び出しを繰り返す場合、 これは常に同じインスタンスを返します。 このインスタンスはステートフルです。

var componentA = React.render(<MyComponent />, document.getElementById('example'));
var componentB = React.render(<MyComponent />, document.getElementById('example'));
componentA === componentB; // true

これが、あなたが自分でインスタンスをコンストラクト(construct)すべきでは無い理由です。 コンストラクトされる前は、ReactElementが事実上のReactComponentです。(翻訳に自信なし) ReactElementの古いものと新しいものは、新しいReactComponentのインスタンスが作成されたのか、 または既存のものが再利用されたのかを確認するために使用される可能性があります。

ReactComponentのrenderメソッドは、別のReactElementを返すことが期待されます。 これは、これらコンポーネントの構成を可能にしてくれます。 最終的には、renderはインスタンス化するDOM要素のタグ文字列をReactElementにし、 それをdocument内に挿入します。

正式な型定義

エントリーポイント

React.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;

ノードと要素

type ReactNode = ReactElement | ReactFragment | ReactText;
type ReactElement = ReactComponentElement | ReactDOMElement;
type ReactDOMElement = {
  type : string,
  props : {
    children : ReactNodeList,
    className : string,
    etc.
  },
  key : string | boolean | number | null,
  ref : string | null
};
type ReactComponentElement<TProps> = {
  type : ReactClass<TProps>,
  props : TProps,
  key : string | boolean | number | null,
  ref : string | null
};
type ReactFragment = Array<ReactNode | ReactEmpty>;
type ReactNodeList = ReactNode | ReactEmpty;
type ReactText = string | number;
type ReactEmpty = null | undefined | boolean;

クラスとコンポーネント

type ReactClass<TProps> = (TProps) => ReactComponent<TProps>;
type ReactComponent<TProps> = {
  props : TProps,
  render : () => ReactElement
};

 Back to top