Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ReactComponentのコンストラクタを追いかけて
hosomichi
September 08, 2015
Technology
8
3k
ReactComponentのコンストラクタを追いかけて
Document for ReactMeetup#2 at 20150908
hosomichi
September 08, 2015
Tweet
Share
More Decks by hosomichi
See All by hosomichi
React_Nativeの_ルーティングばなし.pdf
hosomichi
0
1.7k
Firebaseをフル活用したサーバーエンジニアレス新規事業プロトタイピング
hosomichi
1
1.9k
Elm is a good teacher
hosomichi
2
1.1k
改善React道
hosomichi
3
810
Other Decks in Technology
See All in Technology
AWS ChatbotでEC2インスタンスを 起動できるようにした
iwamot
0
170
Scrum Fest Niigata 2022 開発エンジニアに聞いてみよう!
moritamasami
1
640
數據的多重宇宙 @ LINE Taiwan
line_developers_tw
PRO
0
910
Oracle Cloud Infrastructure:2022年5月度サービス・アップデート
oracle4engineer
PRO
0
140
ドキュメントの翻訳に必要なこと
mayukosawai
0
190
Steps toward self-service operations in eureka
fukubaka0825
0
930
【初心者向け】ググらずに!? ターミナル上で Pythonオブジェクトを調べよう
yumihiki
0
110
プルリク作ったらデプロイされる仕組み on ECS / SRE NEXT 2022
carta_engineering
1
570
toilを解消した話
asumaywy
0
220
長年運用されてきたモノリシックアプリケーションをコンテナ化しようとするとどんな問題に遭遇するか? / SRE NEXT 2022
nulabinc
PRO
15
8k
Puny to Powerful PostgreSQL Rails Apps
andyatkinson
PRO
0
400
Remixの凄みを紹介したい
aiji42
4
2.7k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
219
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Making the Leap to Tech Lead
cromwellryan
113
6.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Scaling GitHub
holman
451
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1k
Why You Should Never Use an ORM
jnunemaker
PRO
47
5.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Done Done
chrislema
174
14k
Building a Scalable Design System with Sketch
lauravandoore
447
30k
Typedesign – Prime Four
hannesfritz
33
1.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
268
11k
Transcript
React Componentの コンストラクタを 追いかけて 2015/09/08 React Meetup #2 hosomichi
自己紹介 と申します
自己紹介 所属 ・Reactを活用した開発業務(5ヶ月少々) ・インターネット広告タグの開発 ・その他何でも(バックエンド/インフラ/Android/マネジメント) を生業としております
私めの課題感
React初学者への 作法説明がゆるい 私めの課題感
私めの課題感 例えば のようなコード
私めの課題感
私めの課題感
私めの課題感
私めの課題感
いわゆるJSコンストラクタと異なる構文に対して、 役割理解・整理が仕切れておらず 上手に説明ができていない自分がいるなーと 私めの課題感
という課題を解決すべく、 ソースコード(0.13.3)を 追うことでReactの裏側の 理解を深めつつ整理しました
①コンストラクタ生成
①コンストラクタ生成 ・内部的にReactClass.createClassをコール ・引数オブジェクトは内部的にはspecと名付け ・Constructorという名のコンストラクタ関数を返却 spec
①コンストラクタ生成 ・ES6型のクラス定義もコンストラクタ関数を提供 ・上記の場合はHosoComponentという コンストラクタ関数になりますね
①コンストラクタ生成 最終的に↑のような コンストラクタ関数が出来上がります ※便宜上Componentコンストラクタ、 実体をComponentインスタンスと呼びます Constructor prototype spec
①コンストラクタ生成 注)specはprototypeに納められます。 specのメンバは全てのComponentインスタンスでアクセス 可能・共有されます。 Constructor prototype spec prototype
②ReactElement生成
②ReactElement生成 ・内部的にはReactElement.createElementをコール ・Componentコンストラクタ・propsを受け取り ReactElementインスタンスを返す JSXと関数コール(やっていることは同じ)
②ReactElement生成 ・生成されたReactElementは↑のような感じです ・第一引数に指定したComponentコンストラクタは typeというメンバに納められます ReactElementインスタンス type key props ref
ところで、まだコンストラクタは 実行されていませんよね・・・ どこでコンストラクトしてるのか・・・ わくわく♪
③React.render
③React.render ・引数にReactElementとコンテナ要素を受け取って 画面描画を実行 ・戻り値としてComponentコンストラクタの 結果値であるインスタンスを返す
③React.render render工程の道のりは長いのですが・・・ ReactMount ReactUpdate ReactReconciler ReactCompositeComponent
③React.render ReactCompositeComponent.mountComponent にてインスタンスを生成していました
③React.render ここでReactElementに渡したpropsが引数となり インスタンスごとの固有データもここで入ります
④最後にthisについて このthisはComponentインスタンスそのものというこ とでした
まとめます
①createClassはComponentコンストラクタを生成 ②ReactElementはコンストラクタとprops/key/refを紐付けたデータ構造 ③ComponentインスタンスはReact.render中に生成される ④renderメソッドなどの内部のthisはComponentインスタンスそのもの ① ④ ② ③
最後に 一句詠みます
None
None
None