React Fiberの仕組みの詳細な説明

React Fiberとは何ですか?

簡単に言えば、React Fiber は、仮想 DOM の増分レンダリングを実装するために React v16 で導入された新しい調整エンジンです。

簡単に言えば、React ビューの更新プロセスをよりスムーズにできる処理方法です。

私たちは皆知っていますが、プロセスは大きく、スレッドは小さいです。繊維は糸よりも細かい粒度を持つ加工機構です。この言葉から、React Fiber が非常に「薄い」ことも推測できます。詳細を確認するために読み進めてみましょう。

なぜReact Fiberなのか?

前述したように、React Fiber は React のビュー更新プロセスをよりスムーズにするように設計されています。なぜですか? 以前は React ビューの更新がスムーズではありませんでしたか?

それは本当です。React v16 より前では、React のビュー更新には大きなパフォーマンスの問題がありましたが、最も顕著だったのは同期更新メカニズムでした。

React がコンポーネントツリーをロードまたは更新することを決定する前に、おおよそ次の一連のアクションを実行します: 各コンポーネントのライフサイクル関数を呼び出す --> 仮想 DOM を計算して比較する --> 実際の DOM ツリーを更新する。このプロセスは同期的です。つまり、プロセスが開始されると、実際の DOM ツリーが更新されるまで、一度に実行されます。

ただし、コンポーネントツリーが大きい場合、このメカニズムは問題になります。300 個のコンポーネントを含むコンポーネントツリーを完全に更新する必要があります。コンポーネントの更新に 1 ミリ秒しかかからないと仮定すると、ツリー全体を更新するには 300 ミリ秒かかります。この 300 ミリ秒の期間中、ブラウザのメインスレッドはコンポーネントツリーの更新に「集中」しており (この時点では関数呼び出しスタックが非常に長くなります)、ページ上の操作には「無関心」です。この期間中に、ユーザーが入力ボックスにいくつかの単語を入力しても、ページに応答はありません。これは、キー入力結果のレンダリングにもメインスレッドが必要であり、この時点でメインスレッドはコンポーネントツリーの更新でビジー状態になっているためです。 300 ミリ秒後、ブラウザのメインスレッドは入力ボックスに入力された単語を自由にレンダリングできるようになります。

本当にラグが多すぎます。

JavaScript のシングルスレッド動作特性のため、業界では常に次のような原則があります。つまり、どのアクションもメインスレッドを長時間占有してはならないということです。メインスレッドが長時間返されない場合、プログラムはこの期間中に他の入力に応答できなくなります。入力後に応答がない、または応答が非常に遅い場合、これを「ラグ」と呼ぶことがあります。明らかに、コンポーネントツリーが巨大な場合、React の同期更新メカニズムはこの原則に違反します。これは大きなタブーです。

React Fiber が誕生した理由は、古い React ビュー更新のパフォーマンスのボトルネックを解決するためです。

React Fiberはどのように機能しますか?

まず、React Fiber は、大規模なコンポーネントツリーの更新に時間がかかるという問題を解決しません。実際、総所要時間は依然として同じです。しかし、これは多くの開発者から批判されてきた、メインスレッドを長時間占有するという問題を解決します。

解決策は、シャーディングです。

その動作原理は次のとおりです。時間のかかる更新タスクを小さなタスクスライスに分割し、実行後に各小さなタスクスライスをメインスレッドに返して、他に緊急に実行する必要があるタスクがあるかどうかを確認します。メインスレッドに戻るときに緊急タスクが見つかった場合は、現在の更新タスクは直ちに停止され、代わりにメインスレッドに緊急タスクを実行するように要求されます。メインスレッドは緊急タスクを完了すると、更新タスクを再度実行します。 (注意⚠️: 最初からやり直すことです。最後に中断した時点から続行するのではありません)。緊急のタスクがない場合は、次のタスクスライスを続行することを敢えてします。

簡単に言えば、ビュー更新の優先度を下げ、更新プロセスを断片化します。

それでは、React Fiber が更新プロセスをどのように処理するかを見てみましょう。

更新プロセスは、調整フェーズとコミットフェーズに分かれています。調整フェーズ (スケジュールフェーズ) では、データを更新して新しい仮想 DOM を生成し、古い仮想 DOM と新しい仮想 DOM の差分を実行して、更新する必要がある要素を取得し、新しい更新キューに入れます。コミットフェーズ (レンダリングフェーズ) では、更新キューを走査して、実際の DOM へのすべての変更を一度に更新します。
調整フェーズはシャードに分割されます。このフェーズはより緊急なタスクによって中断される可能性があり、シャードされたタスクは途中で再開する必要がある場合があります。
コミットフェーズでは、DOM は一度に更新され、中断することはできません。

React Fiberの実装原理

React Fiber を実装する際には 2 つの困難があります。一時停止/再開をどのように実装するか?タスクをどのように分配しますか?

前者の場合、一時停止/再開は状態を保存する必要があることを意味します。ここでは、リンクリストとポインターを使用した「単一のリンクリストツリートラバーサルアルゴリズム」が実装で使用され、トラバーサルプロセスの前のステップと次のステップが記録されます。

後者の場合、 requestAnimationFrameとrequestIdelCallback 2 つの API が使用されます。このうち、 requestAnimationFrameはブラウザによってフレームごとに実行され、いくつかの高優先度タスクをそこに配置できます。一方、 requestIdelCallbackは、フレームの最後に空き時間がある場合にのみブラウザによって実行され、いくつかの低優先度タスクをそこに配置できますが、ポリフィルが必要です (互換性が低いため)。