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.4k
Elm is a good teacher
hosomichi
2
1.4k
改善React道
hosomichi
3
1.1k
Other Decks in Technology
See All in Technology
AIエージェント開発手法と業務導入のプラクティス
ykosaka
9
2.7k
Azure × MCP 入門
ry0y4n
7
1.1k
バクラクの認証基盤の成長と現在地 / bakuraku-authn-platform
convto
4
910
Global Azure2025(GitHub Copilot ハンズオン)
tomokusaba
1
490
LINE 購物幕後推手
line_developers_tw
PRO
0
340
Azure & DevSecOps
kkamegawa
2
150
企業が押さえるべきMCPの未来
takaakikakei
3
710
今日からはじめるプラットフォームエンジニアリング
jacopen
8
2k
ビジネスとデザインとエンジニアリングを繋ぐために 一人のエンジニアは何ができるか / What can a single engineer do to connect business, design, and engineering?
kaminashi
2
880
データベース04: SQL (1/3) 単純質問 & 集約演算
trycycle
PRO
0
710
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
2
460
Databricksで完全履修!オールインワンレイクハウスは実在した!
akuwano
0
150
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
The Cost Of JavaScript in 2023
addyosmani
49
7.8k
Agile that works and the tools we love
rasmusluckow
329
21k
Visualization
eitanlees
146
16k
Writing Fast Ruby
sferik
628
61k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.4k
The Invisible Side of Design
smashingmag
299
50k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
560
Building an army of robots
kneath
305
45k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
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