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生成
・内部的にはReactElement.createElementをコール
・Componentコンストラクタ・propsを受け取り
ReactElementインスタンスを返す
JSXと関数コール(やっていることは同じ)
②ReactElement生成
・生成されたReactElementは↑のような感じです
・第一引数に指定したComponentコンストラクタは
typeというメンバに納められます
ReactElementインスタンス
type
key
props
ref
ところで、まだコンストラクタは
実行されていませんよね・・・
どこでコンストラクトしてるのか・・・
わくわく♪
③React.render
③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のコンストラクタを追いかけて
React componentのコンストラクタを追いかけて

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