Deep Dive Into React 〜React Fiber Architectureについて〜 株式会社AI Shift 安井大晟（ytaisei_）

自己紹介 ● 株式会社AI Shift ○ Webフロントエンド ○ ここ3ヶ月はバックエンド ● 2024年新卒1年目 ● LLMを用いた業務改善ツール

アジェンダ 1. Reactの基本 2. React Fiberについて 3. Trigger Phase 4. Render Phase 5. Commit Phase https://jser.dev/2023-07-14-initial-mount/ を主に参考にします

Reactの基本

Reactの基本 - createRoot 私たちがReactで開発をする際に当たり前のように書いているコードです。 1. getElementByIdでtargetのDOMを取得 2. targetのDOMをcreateRootに渡す 3. root.renderにレンダリングしたい Componentを渡す https://ja.react.dev/reference/react-dom/client/createRoot

Reactの基本 - createRoot 私たちがReactで開発をする際に当たり前のように書いているコードです。 1. getElementByIdでtargetのDOMを取得 2. targetのDOMをcreateRootに渡す 3. root.renderにレンダリングしたいComponentを渡す https://ja.react.dev/reference/react-dom/client/createRoot あとはの中でいい感じに ルーティングして描画する コンポーネントを制御すればいい

Reactの基本 - createRoot ではroot.renderの中でReactは何をしているのか？

React Fiberについて

React Fiberについて - FiberRootNodeとFiberNode https://jser.dev/2023-07-14-initial-mount/#1-brief-introduction-on-fiber-architecture Reactは内部でFiber Treeを構築して 差分の更新を最小限に抑えている Fiberの種類は2種類 ● FiberRootNode ● FiberNode

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に関するデータ など

React Fiberについて - currentとworkInProgress ● currentはUIに描画される 現在のバージョンのFiberNode ● workInProgressは 新たに構築しているFiberNode これらを比較して差分を検知する

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に反映

Trigger Phase

Trigger Phase - createRoot FiberRootNodeを作成してレンダリングの準備をする 1. FiberRootNodeを作成 2. HostRootを作成 3. FiberRootNodeとHostRoot を関連づける 対象のコード：createRoot

Trigger Phase - createRoot FiberRootNodeを作成してレンダリングの準備をする 対象のコード：createRoot

Trigger Phase - ReactDOMRoot.render() renderを実行して更新をスケジュールする 対象のコード：updateContainer 1. ReactNodeのリストを引数で受け取る 2. 更新するオブジェクトを作成 3. enqueueしてスケジュールする

Render Phase

Render Phase - renderRootSync RootのFiberNodeからFiberTreeを構築する 対象のコード：renderRootSync 1. prepareFreshStackでFiberTree構築 のための準備をする 2. workLoopSyncでworkInProgressがnullになる（末 端のFiberNodeに到達する）まで performUnitOfWorkを実行する

Render Phase - prepareFreshStack 対象のコード：prepareFreshStack （色々あるが） workInProgressのHostRootを用意する

Render Phase - performUnitOfWork FiberNodeごとにbeginWorkを実行する

Render Phase - performUnitOfWork FiberNodeごとにbeginWorkを実行する ● FiberNodeのtagを見て実行する処理を分岐 ● 返り値は次に処理するFiberNode ● 内部の処理でreconcilation（差分の調整） を行なっている 対象のコード：beginWork

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

Render Phase - 全体像

Render Phase - 全体像 Fiber Treeが完成し必要な DOM Nodeが作成され、 DOM操作が必要な FiberNodeに フラグをつけることができた

Commit Phase

Commit Phase - commitMutationEffects 1. recursivelyTraverseMutationEffectsが再帰的に 実行され、削除予定の子要素を削除 する 2. commitReconciliationEffectsは 実際にDOMの挿入を行う FiberTreeを元にDOMの削除と更新を行う 対象のコード：commitMutationEffects

Commit Phase - 全体像 FiberTreeを元に実際の DOMに反映。 FiberRootNodeのcurrentを今までの workInProgressに変更

今回の内容をまとめた記事も書きました https://zenn.dev/aishift/articles/d046335a98bc34