Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reactを段階的に覗いてみる

ytaisei
March 21, 2025

 Reactを段階的に覗いてみる

React Tokyo ミートアップ #3で使用した資料です。

https://react-tokyo.connpass.com/event/345893/

ytaisei

March 21, 2025
Tweet

More Decks by ytaisei

Other Decks in Technology

Transcript

  1. 段階を追って理解する 1. React Componentが宣言的にレンダリング される 2. JSXがトランスパイル されReact Elementに変換される 3.

    React Nodeを元にFiber Treeが構築され DOMを操作し、ブラウザにレンダリングされる *段階を追って理解をするため、あえて抽象的な表現を使っています
  2. React Fiber Architectureについて - Reconciliation • currentはUIに描画される 現在のバージョンのFiberTree / Node

    • workInProgressは 新たに構築しているFiberTree / Node これらを比較して差分を検知する
  3. 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に反映
  4. Render Phase - renderRootSync RootのFiberNodeから順に FiberTreeを構築する 対象のコード:renderRootSync 1. prepareFreshStackでFiberTree構築 のための準備をする

    2. workLoopSyncでworkInProgressがnullになる(末 端のFiberNodeに到達する)まで performUnitOfWorkを実行する
  5. Render Phase - completeWork 対象のコード:completeWork 1. createInstanceで実際の DOMのインスタンスを作成 2. appendAllChildrenでサブツリーのDOM

    Nodeを全 てappendしたDOM Nodeを作成 3. それをstateNodeに代入 completeWorkをFiber Treeを逆に戻るように実行
  6. Render Phase - completeWork 対象のコード:completeWork 1. createInstanceで実際のDOMの インスタンスを作成 2. appendAllChildrenでサブツリーのDOM

    Nodeを全 てappendしたDOM Nodeを作成 3. それをstateNodeに代入 completeWorkをFiber Treeを逆に戻るように実行
  7. 再掲)Render Phase - completeWork 対象のコード:completeWork 1. createInstanceで実際のDOMの インスタンスを作成 2. appendAllChildrenでサブツリーのDOM

    Nodeを全 てappendしたDOM Nodeを作成 3. それをstateNodeに代入 completeWorkをFiber Treeを逆に戻るように実行
  8. まとめ • React Componentが宣言的にレンダリング される • JSXがトランスパイル されReact Elementに変換される •

    React Nodeを元にFiber Treeが構築され DOMを操作し、ブラウザにレンダリングされる