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
Reactを段階的に覗いてみる
Search
ytaisei
March 21, 2025
Technology
2
1.5k
Reactを段階的に覗いてみる
React Tokyo ミートアップ #3で使用した資料です。
https://react-tokyo.connpass.com/event/345893/
ytaisei
March 21, 2025
Tweet
Share
More Decks by ytaisei
See All by ytaisei
TanStack Routerを新規プロダクトで1年間運用してみた結果
ytaisei
1
120
Reactのトランジションを覗いてみる
ytaisei
1
1.9k
Deep Dive Into React 〜React Fiber Architectureについて〜
ytaisei
1
190
React19で状態管理はどう変わるか
ytaisei
2
160
TanStackで効率的なルーティングとデータ取得を実現
ytaisei
9
1.8k
TanStack Routerで型安全かつ効率的なルーティングを実現
ytaisei
4
1.8k
BunがCommonJSをサポートする理由
ytaisei
2
350
TanStack Router SPA開発の選択肢になるか(+TanStack Query)
ytaisei
2
1.4k
【2023】SWR vs TanStack Query
ytaisei
1
2.1k
Other Decks in Technology
See All in Technology
LLM時代の検索
shibuiwilliam
2
430
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
380
[ JAWS-UG千葉支部 x 彩の国埼玉支部 ]ムダ遣い卒業!FinOpsで始めるAWSコスト最適化の第一歩
sh_fk2
2
140
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
150
CDK Toolkit Libraryにおけるテストの考え方
smt7174
0
120
What’s new in Android development tools
yanzm
0
460
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.2k
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
490
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
970
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
21k
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
3
290
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
180
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
How GitHub (no longer) Works
holman
314
140k
The Invisible Side of Design
smashingmag
301
51k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Designing Experiences People Love
moore
142
24k
Automating Front-end Workflow
addyosmani
1370
200k
What's in a price? How to price your products and services
michaelherold
246
12k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
Optimizing for Happiness
mojombo
379
70k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
Reactを段階的に覗いてみる 安井大晟(ytaisei_)
自己紹介 • 株式会社AI Shift ◦ Webフロントエンド ◦ LLMを活用した新規事業 • 社会人1年目
• AI Agentの開発をしています
第一回React TokyoのLTでも登壇させていただきました!
普段意識しているReact • 状態管理 • コンポーネント設計 • データフェッチ戦略 など
普段意識しているReact • 状態管理 • コンポーネント設計 • データフェッチ戦略 など Reactのコンポーネントが どのようにブラウザにレンダリングしているかを意識する必要はない
Reactを覗いていきましょう
段階を追って理解する 1. React Componentが宣言的にレンダリング される 2. JSXがトランスパイル されReact Elementに変換される 3.
React Nodeを元にFiber Treeが構築され DOMを操作し、ブラウザにレンダリングされる *段階を追って理解をするため、あえて抽象的な表現を使っています
段階を追って理解する 本日のゴールは Reactのソースコードから 実際にDOMの操作をしている箇所に辿り着くことです!
1. React Componentが宣言的にレンダリングされる
React Componentが宣言的にレンダリングされる • JSX構文でDOM構造とスタイリングをする • Stateを用いてリアクティブな画面を設計する • useEffectで副作用を管理する など
React Componentが宣言的にレンダリングされる • JSX構文でDOM構造とスタイリングをする • Stateを用いてリアクティブな画面を設計する • useEffectで副作用を管理する など 命令的に
DOMの操作をする必要がないのは 宣言的UIのメリット
ところで、 JQueryだったりで命令的に Webフロントを開発する 機会は減ったのではないでしょうか
当時の自分の感覚 JSXが直接描画されてる???
実際は複数のフェーズに分かれている
実際は複数のフェーズに分かれている 今回はブラウザのレンダリング処理までは話せません ...
2. JSXがトランスパイルされ React Elementに変換される
JSXがトランスパイルされReact Elementに変換される
JSXがトランスパイルされReact Elementに変換される JSXはJSの構文拡張なのでそのまま実行ができない ビルド時に babelなどでのトランスパイル処理が必要
JSXがトランスパイルされReact Elementに変換される 参考:https://babeljs.io/docs/babel-plugin-transform-react-jsx Classic React17以降
JSXがトランスパイルされReact Elementに変換される React Elementの型定義 React Elementの例
JSXがトランスパイルされReact Elementに変換される React Element React Node
JSXがトランスパイルされReact Elementに変換される React Element React Node ReactNodeはReactElementを内包する Reactがレンダーできるすべての値を表す型
次に発生する疑問 オブジェクトってレンダリングできる???
3. React Nodeを元にFiber Treeが構築され DOMを操作し、ブラウザにレンダリングされる
Reactの基本 - createRoot 1. getElementByIdでtargetのDOMを取得 2. targetのDOMをcreateRootに渡す 3. root.renderにレンダリングしたい React
Nodeを渡す root.renderにレンダリング対象の React Nodeを渡す
root.renderの中では何をしてる ...?
ReactElementを元にFiberTreeが構築されDOMを操作し、ブラウザにレンダリングされる
React Fiberについて
React Fiber Architectureについて https://jser.dev/2023-07-14-initial-mount/#1-brief-introduction-on-fiber-architecture https://github.com/acdlite/react-fiber-architecture?tab=readme-ov-file 「React Fiber Architecture」 Reactは内部でFiber Treeを構築して
差分の更新を最小限に抑えている
React Fiber Architectureについて - Reconciliation • currentはUIに描画される 現在のバージョンのFiberTree / Node
• workInProgressは 新たに構築しているFiberTree / Node これらを比較して差分を検知する
React Fiber Architectureについて - 4つの実行フェーズ 1. Trigger Phase 2. Schedule
Phase a. 実行されるタスクに優先順位を設定 する b. Fiber Architectureの中でも特に重要(今回はスキップ) 3. Render Phase a. スケジュールされたタスクを実行し、 新しいFiber Treeを構築してDOMに変更が必要な対象を整理 4. Commit Phase a. 更新対象をDOMに反映
Render Phase
Performタブで確認する(初回マウントの場合)
Render Phase - renderRootSync RootのFiberNodeから順に FiberTreeを構築する 対象のコード:renderRootSync 1. prepareFreshStackでFiberTree構築 のための準備をする
2. workLoopSyncでworkInProgressがnullになる(末 端のFiberNodeに到達する)まで performUnitOfWorkを実行する
Render Phase - performUnitOfWork 各FiberNodeごとにbeginWorkを実行する
Render Phase - performUnitOfWork FiberNodeごとにbeginWorkを実行する 対象のコード:beginWork
Render Phase - completeWork 対象のコード:completeWork 1. createInstanceで実際の DOMのインスタンスを作成 2. appendAllChildrenでサブツリーのDOM
Nodeを全 てappendしたDOM Nodeを作成 3. それをstateNodeに代入 completeWorkをFiber Treeを逆に戻るように実行
Render Phase - completeWork 対象のコード:completeWork 1. createInstanceで実際のDOMの インスタンスを作成 2. appendAllChildrenでサブツリーのDOM
Nodeを全 てappendしたDOM Nodeを作成 3. それをstateNodeに代入 completeWorkをFiber Treeを逆に戻るように実行
Render Phase - 全体像 Fiber Treeが完成し必要な DOM Nodeが作成され、 DOM操作が必要な FiberNodeに
フラグをつけることができた
Commit Phase
実際は複数のフェーズに分かれている
Commit Phase 1. 再帰的に削除予定の子要素を削除する 2. 実際にDOMの挿入を行う (この実装を見ていきましょう) Fiber Treeを元にDOMの削除と更新を行う 対象のコード:commitMutationEffects
段階を追って理解する 本日のゴールは Reactのソースコードから 実際にDOMの操作をしている箇所に辿り着くことです! https://github.com/facebook/react/blob/4f604941569d2e8947ce1460a0b2997e835f37b9/packag es/react-reconciler/src/ReactFiberCommitWork.js#L2583-L2587 ReactはFlowというAltJSで書かれています
再掲)Render Phase - completeWork 対象のコード:completeWork 1. createInstanceで実際のDOMの インスタンスを作成 2. appendAllChildrenでサブツリーのDOM
Nodeを全 てappendしたDOM Nodeを作成 3. それをstateNodeに代入 completeWorkをFiber Treeを逆に戻るように実行
Commit Phase - DOMの挿入
Commit Phase - DOMの挿入
Commit Phase - DOMの挿入
まとめ • React Componentが宣言的にレンダリング される • JSXがトランスパイル されReact Elementに変換される •
React Nodeを元にFiber Treeが構築され DOMを操作し、ブラウザにレンダリングされる
ご清聴ありがとうございました!