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
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
120
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
460
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
77k
about #74462 go/token#FileSet
tomtwinkle
1
400
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
290
SOC2取得の全体像
shonansurvivors
1
400
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
280
Trust as Infrastructure
bcantrill
0
350
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
140
「Verify with Wallet API」を アプリに導入するために
hinakko
1
240
【Oracle Cloud ウェビナー】クラウド導入に「専用クラウド」という選択肢、Oracle AlloyとOCI Dedicated Region とは
oracle4engineer
PRO
3
110
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
1k
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
The Invisible Side of Design
smashingmag
301
51k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Rails Girls Zürich Keynote
gr2m
95
14k
Mobile First: as difficult as doing things right
swwweet
224
10k
GraphQLとの向き合い方2022年版
quramy
49
14k
For a Future-Friendly Web
brad_frost
180
9.9k
Documentation Writing (for coders)
carmenintech
75
5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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