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.7k
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.3k
Firebaseをフル活用したサーバーエンジニアレス新規事業プロトタイピング
hosomichi
1
2.5k
Elm is a good teacher
hosomichi
2
1.4k
改善React道
hosomichi
3
1.1k
Other Decks in Technology
See All in Technology
2025/07/22_家族アルバム みてねのCRE における生成AI活用事例
masartz
2
130
SAE J1939シミュレーション環境構築
daikiokazaki
1
190
ファインディにおける Dataform ブランチ戦略
hiracky16
0
200
MCPと認可まわりの話 / mcp_and_authorization
convto
2
270
Shadow DOMとセキュリティ - 光と影の境界を探る / Shibuya.XSS techtalk #13
masatokinugawa
0
300
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
270
低レイヤソフトウェア技術者が YouTuberとして食っていこうとした話
sat
PRO
7
5.9k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
130
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
240
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
4
500
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
160
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
540
Featured
See All Featured
Fireside Chat
paigeccino
37
3.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Invisible Side of Design
smashingmag
301
51k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Unsuck your backbone
ammeep
671
58k
Docker and Python
trallard
45
3.5k
Why Our Code Smells
bkeepers
PRO
337
57k
Designing for humans not robots
tammielis
253
25k
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