React componentのコンストラクタを追いかけて

React Componentの
コンストラクタを
追いかけて
2015/09/08 React Meetup #2
hosomichi

自己紹介
所属
・Reactを活用した開発業務(5ヶ月少々)
・インターネット広告タグの開発
・その他何でも(バックエンド/インフラ/Android/マネジメント)
を生業としております

React初学者への
作法説明がゆるい
私めの課題感

私めの課題感
例えば
のようなコード

いわゆるJSコンストラクタと異なる構文に対して、
役割理解・整理が仕切れておらず
上手に説明ができていない自分がいるなーと
私めの課題感

という課題を解決すべく、
ソースコード(0.13.3)を
追うことでReactの裏側の
理解を深めつつ整理しました

①コンストラクタ生成

・内部的にReactClass.createClassをコール
・引数オブジェクトは内部的にはspecと名付け
・Constructorという名のコンストラクタ関数を返却
spec

・ES6型のクラス定義もコンストラクタ関数を提供
・上記の場合はHosoComponentという
コンストラクタ関数になりますね

最終的に↑のような
コンストラクタ関数が出来上がります
※便宜上Componentコンストラクタ、
実体をComponentインスタンスと呼びます
Constructor
prototype
spec

注)specはprototypeに納められます。
specのメンバは全てのComponentインスタンスでア
クセス可能・共有されます。
Constructor
prototype
spec
prototype

②ReactElement生成
・内部的にはReactElement.createElementをコール
・Componentコンストラクタ・propsを受け取り
ReactElementインスタンスを返す
JSXと関数コール(やっていることは同じ)

②ReactElement生成
・生成されたReactElementは↑のような感じです
・第一引数に指定したComponentコンストラクタは
typeというメンバに納められます
ReactElementインスタンス
type
key
props
ref

ところで、まだコンストラクタは
実行されていませんよね・・・
どこでコンストラクトしてるのか・・・
わくわく♪

③React.render
・引数にReactElementとコンテナ要素を受け取って
画面描画を実行
・戻り値としてComponentコンストラクタの
結果値であるインスタンスを返す

③React.render
render工程の道のりは長いのですが・・・
ReactMount
ReactUpdate
ReactReconciler
ReactCompositeComponent

③React.render
ReactCompositeComponent.mountComponent
にてインスタンスを生成していました

③React.render
ここでReactElementに渡したpropsが引数となり
インスタンスごとの固有データもここで入ります

④最後にthisについて
このthisはComponentインスタンスそのものと
いうことでした

①createClassはComponentコンストラクタを生成
②ReactElementはコンストラクタとprops/key/refを紐付けたデータ構造
③ComponentインスタンスはReact.render中に生成される
④renderメソッドなどの内部のthisはComponentインスタンスそのもの
①
④
②③

React componentのコンストラクタを追いかけて

React componentのコンストラクタを追いかけて

More Related Content

What's hot (20)

Similar to React componentのコンストラクタを追いかけて (20)

React componentのコンストラクタを追いかけて