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

Document for ReactMeetup#2 at 20150908

Transcript

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

   View Slide

2. 自己紹介
   と申します
   

   View Slide

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

   View Slide

4. 私めの課題感
   

   View Slide

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

   View Slide

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

   View Slide

7. 私めの課題感
   

   View Slide

8. 私めの課題感
   

   View Slide

9. 私めの課題感
   

   View Slide

10. 私めの課題感
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. ②ReactElement生成
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. ③React.render
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. まとめます
    

    View Slide

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

    View Slide

30. 最後に
    一句詠みます
    

    View Slide

31. View Slide

32. View Slide

33. View Slide