Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 と申します

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

私めの課題感

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

私めの課題感

Slide 8

Slide 8 text

私めの課題感

Slide 9

Slide 9 text

私めの課題感

Slide 10

Slide 10 text

私めの課題感

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

①コンストラクタ生成

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

②ReactElement生成

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

③React.render

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

まとめます

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

最後に 一句詠みます

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content