taiki-t's diary

きぎょうにっき, React Native, Rails そして雑多な記録: The world is waiting for you to give it the meaning.

Reactエレメント、コンポーネント、そしてインスタンス

React Components, Elements, and Instances - React Blog

を読んだメモ

エレメント(要素)

  • エレメントは、コンポーネントインスタンスまたはDOMノードを記述する、普通のオブジェクト
  • エレメントは、実際のインスタンスではない
  • エレメントは、何を画面上に見たいかReactに伝えるための手段(記述)
  • エレメントは、コンポーネントのタイプを表すtypeフィールドと、そのプロパティを表すpropsフィールドから成る*1
    • 子要素があれば、それも含むことになる
  • エレメントは、記述のためのイミュータブルなオブジェクトに過ぎない

DOMエレメントとコンポーネントエレメント

DOMエレメント

  • エレメントのtypeが文字列であるとき、エレメントはそのタグ名をもつDOMノードを表す。エレメントのpropsフィールドは、そのDOMノードの属性に対応する
  • 子要素も親要素も単なる記述に過ぎず、記述した時点では画面上のものへの参照を一切持たない
  • 画面上に見たいDOMを記述するエレメント

コンポーネントエレメント

DOMエレメントとコンポーネントエレメントの関係

  • Reactはコンポーネントエレメント(typeが関数もしくはクラスであるエレメント)を見つけると、そのコンポーネントが、与えられたpropsと共にどんなエレメントを吐き出すのかをたずねる
  • Reactはこのプロセスを、最終のDOMタグになるまで繰り返す

コンポーネント

画面に見たいものを記述すれば、そのインスタンスの管理(作成、更新、削除)はReactがよしなにやってくれる。

インスタンス

*1:説明の簡単のために省かれたが、実際はもう一つフィールドがある