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

Reactを段階的に覗いてみる

Avatar for ytaisei ytaisei
March 21, 2025

 Reactを段階的に覗いてみる

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

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

Avatar for ytaisei

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を操作し、ブラウザにレンダリングされる