Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ReactComponentのコンストラクタを追いかけて
Search
hosomichi
September 08, 2015
Technology
8
3.6k
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
2.2k
Firebaseをフル活用したサーバーエンジニアレス新規事業プロトタイピング
hosomichi
1
2.4k
Elm is a good teacher
hosomichi
2
1.4k
改善React道
hosomichi
3
1k
Other Decks in Technology
See All in Technology
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
130
3年でバックエンドエンジニアが5倍に増えても破綻しなかったアーキテクチャ そして、これから / Software architecture that scales even with a 5x increase in backend engineers in 3 years
euglena1215
11
3.9k
Unlearn Product Development - Unleashed Edition
lemiorhan
PRO
2
130
能動的ドメイン名ライフサイクル管理のすゝめ / Practice on Active Domain Name Lifecycle Management
nttcom
0
280
「完全に理解したTalk」完全に理解した
segavvy
1
180
新機能VPCリソースエンドポイント機能検証から得られた考察
duelist2020jp
0
240
MasterMemory v3 最速確認会
yucchiy
0
190
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
3
1.5k
開発生産性向上! 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
690
成果を出しながら成長する、アウトプット駆動のキャッチアップ術 / Output-driven catch-up techniques to grow while producing results
aiandrox
0
400
スタートアップで取り組んでいるAzureとMicrosoft 365のセキュリティ対策/How to Improve Azure and Microsoft 365 Security at Startup
yuj1osm
0
250
Opcodeを読んでいたら何故かphp-srcを読んでいた話
murashotaro
0
340
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Statistics for Hackers
jakevdp
796
220k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Bash Introduction
62gerente
609
210k
Adopting Sorbet at Scale
ufuk
74
9.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
96
17k
Rails Girls Zürich Keynote
gr2m
94
13k
Navigating Team Friction
lara
183
15k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Become a Pro
speakerdeck
PRO
26
5k
Documentation Writing (for coders)
carmenintech
67
4.5k
How to train your dragon (web standard)
notwaldorf
88
5.7k
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