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.5k
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.1k
Firebaseをフル活用したサーバーエンジニアレス新規事業プロトタイピング
hosomichi
1
2.3k
Elm is a good teacher
hosomichi
2
1.3k
改善React道
hosomichi
3
990
Other Decks in Technology
See All in Technology
MySQLのロックの種類とその競合
yoku0825
6
1.6k
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
GraphQLとの向き合い方2022年版
quramy
36
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Infographics Made Easy
chrislema
238
18k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
How STYLIGHT went responsive
nonsquared
93
5k
KATA
mclloyd
20
13k
What the flash - Photography Introduction
edds
65
11k
Designing Experiences People Love
moore
136
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Clear Off the Table
cherdarchuk
89
320k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
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