序文
再構築されたアーキテクチャは、react16 以降のバージョンで 15 より前のバージョンのアーキテクチャを再構築したものです。
React 15 のアーキテクチャは 2 つの層に分割できます。
- Reconciler は、変更されたコンポーネントを見つけて、それらを更新する方法を特定する責任があります。
- レンダラーは、変更されたコンポーネントをページ上にレンダリングする役割を果たします。
React 15 は、再帰的かつ同期的なスタック メディエーターを使用します。このような設計では、コンポーネントの更新を簡単かつ迅速に行うことができますが、次のような欠点もあります。
- アップデートが開始されると途中で中断することができないため、ブラウザのレンダリングに遅延が発生する可能性があります。
- 非同期、シャーディング、優先度などの高度な機能は実装できません。
- requestIdleCallback や requestAnimationFrame などの新しいブラウザ機能とは互換性がありません。
React 16 のアーキテクチャは 3 つの層に分割できます。
- スケジューラー（スケジューラー）はタスクの優先順位をスケジューリングする役割を持ち、品質の高いタスクが最初に入力されます。
- 和解者。Reconciler は、変更されたコンポーネントを見つけて、それらを更新する方法を特定する責任があります。
- レンダラーは、変更されたコンポーネントをページ上にレンダリングする責任を負います。¹²
React 16 は、周期的、非同期、割り込み可能な新しいファイバー メディエーターを使用します。この設計により、コンポーネントの更新がより柔軟かつ効率的に行われるようになり、次のような利点がもたらされます。
- メインスレッドが長時間占有されて遅延が発生することを避けるために、ブラウザの各フレームで JS スレッド用の時間を予約できます。
- 同時モード、サスペンス、遅延読み込みなどの非同期、シャーディング、優先順位などの高度な機能を実装できます。
- requestIdleCallback や requestAnimationFrame などの新しいブラウザ機能と互換性があります。
要約する
React のアーキテクチャを再構築する主な理由は、レンダリング パフォーマンスと UI のユーザー エクスペリエンスを向上させ、CPU と I/O のボトルネックを解決し、非同期、割り込み可能、回復可能、優先順位付けされた更新プロセスを実装し、次のようないくつかの新機能をサポートすることです。 Time Slice (タイム スライス)、Suspense (ホバリング)、Lazy Loading (遅延読み込み)、Concurrent Mode (同時モード) であるため、react15 の再帰的および同期更新の実行はサポートされておらず、リファクタリングが必要になります。