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

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

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

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

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

Transcript

1. Deep Dive Into React 〜React Fiber Architectureについて〜 株式会社AI Shift 安井大晟（ytaisei_）
2. 自己紹介 • 株式会社AI Shift ◦ Webフロントエンド ◦ ここ3ヶ月はバックエンド • 2024年新卒1年目 • LLMを用いた業務改善ツール
3. アジェンダ 1. Reactの基本 2. React Fiberについて 3. Trigger Phase 4. Render Phase 5. Commit Phase https://jser.dev/2023-07-14-initial-mount/ を主に参考にします
4. Reactの基本
5. Reactの基本 - createRoot 私たちがReactで開発をする際に当たり前のように書いているコードです。 1. getElementByIdでtargetのDOMを取得 2. targetのDOMをcreateRootに渡す 3. root.renderにレンダリングしたい Componentを渡す https://ja.react.dev/reference/react-dom/client/createRoot
6. 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 />の中でいい感じに ルーティングして描画する コンポーネントを制御すればいい
7. Reactの基本 - createRoot ではroot.renderの中でReactは何をしているのか？
8. React Fiberについて
9. 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
10. 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に関するデータ など
11. React Fiberについて - currentとworkInProgress • currentはUIに描画される 現在のバージョンのFiberNode • workInProgressは 新たに構築しているFiberNode これらを比較して差分を検知する
12. 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に反映
13. Trigger Phase
14. Trigger Phase - createRoot FiberRootNodeを作成してレンダリングの準備をする 1. FiberRootNodeを作成 2. HostRootを作成 3. FiberRootNodeとHostRoot を関連づける 対象のコード：createRoot
15. Trigger Phase - createRoot FiberRootNodeを作成してレンダリングの準備をする 対象のコード：createRoot
16. Trigger Phase - ReactDOMRoot.render() renderを実行して更新をスケジュールする 対象のコード：updateContainer 1. ReactNodeのリストを引数で受け取る 2. 更新するオブジェクトを作成 3. enqueueしてスケジュールする
17. Render Phase
18. Render Phase - renderRootSync RootのFiberNodeからFiberTreeを構築する 対象のコード：renderRootSync 1. prepareFreshStackでFiberTree構築 のための準備をする 2. workLoopSyncでworkInProgressがnullになる（末 端のFiberNodeに到達する）まで performUnitOfWorkを実行する
19. Render Phase - prepareFreshStack 対象のコード：prepareFreshStack （色々あるが） workInProgressのHostRootを用意する
20. Render Phase - performUnitOfWork FiberNodeごとにbeginWorkを実行する
21. Render Phase - performUnitOfWork FiberNodeごとにbeginWorkを実行する • FiberNodeのtagを見て実行する処理を分岐 • 返り値は次に処理するFiberNode • 内部の処理でreconcilation（差分の調整） を行なっている 対象のコード：beginWork
22. Render Phase - completeWork 対象のコード：completeWork 1. createInstanceで実際のDOMの インスタンスを作成 2. appendAllChildrenでサブツリーのDOM Nodeを全 てappendしたDOM Nodeを作成 3. それをstateNodeに代入 completeWorkをFiber Treeを逆に戻るように実行
23. Render Phase - 全体像
24. Render Phase - 全体像 Fiber Treeが完成し必要な DOM Nodeが作成され、 DOM操作が必要な FiberNodeに フラグをつけることができた
25. Commit Phase
26. Commit Phase - commitMutationEffects 1. recursivelyTraverseMutationEffectsが再帰的に 実行され、削除予定の子要素を削除 する 2. commitReconciliationEffectsは 実際にDOMの挿入を行う FiberTreeを元にDOMの削除と更新を行う 対象のコード：commitMutationEffects
27. Commit Phase - 全体像 FiberTreeを元に実際の DOMに反映。 FiberRootNodeのcurrentを今までの workInProgressに変更
28. 今回の内容をまとめた記事も書きました https://zenn.dev/aishift/articles/d046335a98bc34