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

Document for ReactMeetup#2 at 20150908

Transcript

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. 最後に 一句詠みます