Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Ae3065818f7f655ddbedaf65227cbd1c?s=47 hosomichi
September 08, 2015

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

Document for ReactMeetup#2 at 20150908

Ae3065818f7f655ddbedaf65227cbd1c?s=128

hosomichi

September 08, 2015
Tweet

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