端折りまくって学ぶReactの内部レンダー・コミット編

端折りまくって学ぶ React の内部レンダー・コミット編 @calloc134 2025 5/9 Matsuriba vol.9 1

React のレンダリングトリガーフェーズレンダリングを発動スケジューリングフェーズタスクを適切なタイミングで実行レンダーフェーズ仮想 DOM
を作成& 変更の差分検知コミットフェーズ実 DOM に書き込み今回は下 2 つを解説します 2

Fiber ノードいわゆる仮想 DOM と呼ばれる根本のノードから二種類のツリーが生える FiberRootNode React アプリケーションの
Root ノードこの FiberRootNode から二つのツリーが生える 3

Fiber ノード ( 続き) current 現在のツリー workInProgress 現在レンダリング中の新しいツリーこの
2 つのツリー間で差分検知を行う 4

なぜ 2 つ存在するの？そもそも差分検知に必須ダブルバッファリングの考え方更新をパッと終わらせレンダリング中に UI が壊れることを防ぐ旧版のツリーを保持することで
リソースのリサイクルが可能メモリ割り当てのコスト削減 5

レンダーフェーズ Fiber ノード詳細今回解説する主要な Fiber ノードの種類は以下の 2 つ FunctionComponent みなさんが普段書いている関数コンポーネント
HostComponent DOM ノード web であれば <div> <span> <p> といった HTML タグ 6

Fiber ノードが持つ参照 child: 子ノード sibling: 兄弟ノード return: 親ノードこれを利用することで簡単にノードを巡回できる
7

Fiber ノードのプロパティ type/tag: ノードの種類 flags: ノードのフラグ行うべき変更などが保持される stateNode: ノードの状態生成された
DOM インスタンスなど関数コンポーネントの場合は実体がないため null その他… 8

レンダー開始 performUnitOfWork 関数から始まるレンダーの最初はコンポーネントの種類(tag) によって動作が変わる関数コンポーネントの実行 A レンダリングが必要なので実行する
必要があるフックを使いながら関数コンポーネント実行戻り値の ReactNode は後で利用 9

差分検出 B beginWork 内部の reconcile... 関連の関数で実行される対象となる要素について先程生成した ReactNode と
current の Fiber で差分検出 ( リコンサイル) を行う同じタイプの要素は再利用 key があれば key で一致をとり差分比較 key がなければインデックスで一致をとり差分比較 … など 10

差分検出 B ( 続き) その結果に応じて flags にフラグを設定 Placement: 新しいノードを追加する Update:
既存のノードを更新する Deletion: 既存のノードを削除するなど… このフラグは二進数で作られており合成することが可能 11

後処理 C completeWork 内部で後処理を行う先程のフラグを元に親ノードに対してフラグを合成最終的に root ノードには
すべてのフラグが合成される更に HostComponent であれば DOM ノードを生成して stateNode に保持 ※ 関数コンポーネントの場合は DOM ノードは生成されないことに注意などを行う 12

巡回のアルゴリズムこの処理の繰り返しが行われる巡回の順番は以下の通り 1. まず対象ノードに対して A ・B を実行 2. 子供がいるか調査
子供がいれば対象ノードを子供に変更して →1 子供いなければ下へ 3. C を実行 4. 兄弟がいるか調査兄弟がいれば対象ノードを兄弟に変更して →1 兄弟がいなければ下へ 13

巡回のアルゴリズム ( 続き) 5. 親がいるか調査親がいなければレンダリングそのものの終了フラグを立て処理を終了親がいれば下へ 6.
親ノードに戻り →3 で C 実行・兄弟調査繰り返す A ・B の処理と C の処理はそれぞれのノードでかならず 1 回ずつ行われる仕組み 14

コミットフェーズフラグや stateNode を元に実際の DOM ノードに変更を加える ( 詳細は省略) すべて適用処理が終わったとき current
と workInProgress の二つのツリーを交換作業中だったツリーが current に昇格する 15

コミットフェーズ ( 続き) WIP はここで破棄せず今後のレンダリングでリソースは適宜再利用され有効活用されるリソース作成の手間が省けてエコ 16

まとめ Fiber の仕組みレンダーの流れ関数コンポーネント実行差分検出後処理巡回のアルゴリズムコミットフェーズお疲れ様でした！
17

今回端折ったところスケジューリングフェーズ全体中断可能なレンダリング初回レンダリングと更新レンダリングの違いステートの実装フックの実装サイドエフェクトの動作もし需要があれば Zenn にまとめるかも？
18

端折りまくって学ぶReactの内部レンダー・コミット編

端折りまくって学ぶReactの内部レンダー・コミット編

calloc134

More Decks by calloc134

Featured

Transcript