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

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

31. None
32. None
33. None