Fiber アーキテクチャ

React.js 18 では、待望の並行レンダラーが追加され、並行更新機能（並行更新モードなし）がサポートされました。並行更新のアーキテクチャは以下の図のようになっています。この記事では、Fiber アーキテクチャを出発点にして、React の並行処理の原理を掘り下げていきます。

卡颂 — 《React 设计原理》

Fiber === React DOM#

Fiber アーキテクチャは、実際には React の VDOM の実装であり、React がコアアルゴリズムを再実装したものです。

主な目標は、アニメーション、レイアウト、ジェスチャーなどの操作の応答速度を向上させることです。Fiber は、レンダリング作業を複数のチャンクに分割し、それらを複数のフレームに分散してレンダリングする能力を持っています。その他の主な機能には、一時停止と再開の能力、新しい更新時に再利用できる能力、異なる更新に優先順位を付ける能力、新しい並行モードが含まれます。

React 16 以前#

ReactDOM の render メソッドを呼び出すか、更新をトリガー（setState）すると、React には 2 つの段階があります。それぞれが調整器（reconciler）とレンダラー（renderer）に対応しています。調整器とレンダラーの機能の実装に基づいて、これらの 2 つの段階はそれぞれ Diff とレンダリングプロセスに対応しています。以下の図を参照してください。

調整フェーズ（Reconciler）：公式の説明。React は、トップダウンの再帰的な方法で新しいデータをトラバースし、新しい仮想 DOM を生成し、Diff アルゴリズムを使用して変更が必要な要素（パッチ）を見つけて更新キューに配置します。
レンダリングフェーズ（Renderer）：更新キューをトラバースし、ホスト環境の API を呼び出して対応する要素を実際に更新およびレンダリングします。ホスト環境には、DOM、Native、WebGL などがあります。

調整フェーズでは、再帰的なトラバース方式が採用されているため、これはスタック調整器とも呼ばれ、ファイバ調整器と区別するための名前です。この方法には 1 つの特徴があります：タスクが開始されると中断することができないため、JavaScript はメインスレッドを占有し続け、全体の仮想 DOM ツリーの計算が完了するまでレンダリングエンジンに実行権を渡すことができません。そのため、ユーザーのインタラクションやアニメーションなどのタスクが即座に処理されないため、遅延が発生し、ユーザーエクスペリエンスに非常に影響を与えます。

この問題を解決するために、React の現在のアプローチは並行機能を導入し、優先度アルゴリズムを使用してタスクの中断と再開を実現しています。既存のスタック調整器アーキテクチャでは、タスクの中断と再開を行うことができず、非同期の更新をサポートすることができないため、16 バージョンで再構築が行われ、Fiber アーキテクチャが導入されました。

Fiber とは何ですか#

前述のように、Fiber の主な目標は、React が並行スケジューリングを使用できるようにすることです。具体的には、次の目標を達成する必要があります。

タスクの中断と再開
異なるタイプのタスクに優先度を割り当てる

これを実現するために、これらの「タスク（Task）」を単位として分解し、現在の更新に関する情報を保存するためのものと、いくつかの静的データ（現在のタスクに対応するノード情報など）を保存するためのものが必要です。これが Fiber ノード（FiberNode）であり、Fiber アーキテクチャは、複数の FiberNode で構成されるツリー構造です。異なる FiberNode は、child、return、sibling などのプロパティで接続されています。

まとめると、Fiber には次の 3 つの意味があります。

アーキテクチャとして、Fiber は FiberNode で構成されるツリー構造であり、16 バージョン以前のスタック調整器とは異なり、16 バージョンの調整器は Fiber に基づいています。
データ構造として、各 FiberNode は ReactElement に対応し、コンポーネントのタイプ、DOM 構造などの情報を保存します。
ワークユニットとして、各 FiberNode は、現在の更新で変更する必要があるコンポーネントの状態と実行する作業を保存します。

Fiber アーキテクチャの構成#

総じて、Fiber アーキテクチャは次の 3 つの部分で構成されています。

FiberRootNode：マウントされたルートノードなどの情報を保存し、更新の実行を開始するノードです。
- Current Fiber Tree と Wip Fiber Tree の変換を担当します。
- タスクのスケジュール情報を保存します。
HostRoot：ホスト環境にマウントされたルートノードで、全体の Fiber Tree を接続します。

Fiber の動作原理#

Fiber アーキテクチャでは、2 つの Fiber Tree が存在します。1 つは実際の UI に対応する Fiber Tree であり、「current」と呼ばれ、もう 1 つはメモリ内で構築されている Fiber Tree であり、「workInProgress」と呼ばれます。これら 2 つの Fiber Tree は、alternate プロパティを介して相互に接続されています。

これは、Multiple buffering - Wikipedia --- 多重バッファリング - Wikipediaと呼ばれるメカニズムです。Fiber を更新する際に、直接 current Fiber Tree を使用せずに、current Fiber Tree をコピーして workInProgress Fiber Tree を更新することができます。更新が完了したら、2 つの Fiber Tree を交換するだけで Fiber Tree の更新が完了します。

まとめ#

この記事では、React 16 以降で導入された並行モデルと、Fiber 構造の構成と動作原理について簡単に紹介しました。次のセクションでは、React の 3 つの主要なコアプロセスとその相互作用について説明し、さらに React の並行原理を分析します。