20150908 ReactMeetup#2

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

2. 自己紹介
と申します

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

4. 私めの課題感

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

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

7. 私めの課題感

8. 私めの課題感

9. 私めの課題感

10. 私めの課題感

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

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

13. ①コンストラクタ生成

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

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

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

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

18. ②ReactElement生成

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

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

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

22. ③React.render

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

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

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

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

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

28. まとめます

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

30. 最後に
一句詠みます