Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Deep Dive Into React 〜React Fiber Architecture...

ytaisei
November 12, 2024

Deep Dive Into React 〜React Fiber Architectureについて〜

この資料は社内のLT会にて使用したものです。

Reactの初回マウントに焦点を当ててどのようにレンダリングされるのかを整理しました。

関連記事:https://zenn.dev/aishift/articles/d046335a98bc34

*学習の過程なので間違った理解があればご指摘いただけると幸いです

ytaisei

November 12, 2024
Tweet

More Decks by ytaisei

Other Decks in Technology

Transcript

  1. アジェンダ 1. Reactの基本 2. React Fiberについて 3. Trigger Phase 4.

    Render Phase 5. Commit Phase https://jser.dev/2023-07-14-initial-mount/ を主に参考にします
  2. Reactの基本 - createRoot 私たちがReactで開発をする際に当たり前のように書いているコードです。 1. getElementByIdでtargetのDOMを取得 2. targetのDOMをcreateRootに渡す 3. root.renderにレンダリングしたいComponentを渡す

    https://ja.react.dev/reference/react-dom/client/createRoot あとは<App />の中でいい感じに ルーティングして描画する コンポーネントを制御すればいい
  3. React Fiberについて - FiberRootNodeとFiberNode https://jser.dev/2023-07-14-initial-mount/#1-brief-introduction-on-fiber-architecture Fiber Nodeの要素 • tag →

    HostRootやFunctionComponentなど識別子 • stateNode → 実際のDOM Nodeへの参照 • child、sibling、return → 他FiberNodeとの関連 • lanes、childLanes → 更新の優先度 • memoizedState → hookに関するデータ など
  4. React Fiberについて - 4つの実行フェーズ 1. Trigger Phase a. ReactDOMRoot.render()もしくはsetState()がTrigger フェーズの起因

    2. Schedule Phase a. 実行されるタスクに優先順位を設定 する *今回はスキップ 3. Render Phase a. スケジュールされたタスクを実行し、 新しいFiber Treeを構築してDOMに変更が必要な対象を整理 4. Commit Phase a. 更新対象をDOMに反映
  5. Render Phase - renderRootSync RootのFiberNodeからFiberTreeを構築する 対象のコード:renderRootSync 1. prepareFreshStackでFiberTree構築 のための準備をする 2.

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

    Nodeを全 てappendしたDOM Nodeを作成 3. それをstateNodeに代入 completeWorkをFiber Treeを逆に戻るように実行
  7. Commit Phase - commitMutationEffects 1. recursivelyTraverseMutationEffectsが再帰的に 実行され、削除予定の子要素を削除 する 2. commitReconciliationEffectsは

    実際にDOMの挿入を行う FiberTreeを元にDOMの削除と更新を行う 対象のコード:commitMutationEffects