メインコンテンツへスキップ

Fabric

Fabric は React Native の新しいレンダリングシステムであり、レガシーレンダリングシステムの概念的な進化です。その中心となる原則は、より多くのレンダリングロジックを C++ で統合し、ホストプラットフォームとの相互運用性を改善し、React Native の新しい機能を解放することです。開発は 2018 年に始まり、2021 年には Facebook アプリの React Native は新しいレンダラーによってサポートされています。

このドキュメントでは、新しいレンダラーとその概念の概要を説明します。プラットフォーム固有の記述は避け、コードスニペットやポインターは含まれていません。このドキュメントでは、主要な概念、動機、利点、およびさまざまなシナリオにおけるレンダリングパイプラインの概要を説明します。

新しいレンダラーの動機と利点​

レンダリングアーキテクチャは、レガシーアーキテクチャでは不可能だったより良いユーザーエクスペリエンスを解放するために作成されました。いくつかの例を挙げます。

  • ホストビューと React ビュー間の相互運用性が改善されたことで、レンダラーは React サーフェスを同期的に測定およびレンダリングできるようになりました。レガシーアーキテクチャでは、React Native のレイアウトは非同期であったため、React Native でレンダリングされたビューをホストビューに埋め込む際にレイアウトの「ジャンプ」問題が発生していました。
  • 多重優先度および同期イベントのサポートにより、レンダラーは特定のユーザーインタラクションを優先し、タイムリーに処理されるようにすることができます。
  • React Suspense との統合により、React アプリでのデータフェッチのより直感的な設計が可能になります。
  • React Native で React のコンカレント機能を有効にします。
  • React Native のサーバーサイドレンダリングの実装が容易になります。

新しいアーキテクチャは、コード品質、パフォーマンス、拡張性にも利点をもたらします。

  • 型安全性： JS とホストプラットフォーム間での型安全性を確保するためのコード生成。コード生成は、JavaScript コンポーネント宣言を信頼できる情報源として使用し、props を保持する C++ 構造体を生成します。JavaScript とホストコンポーネントの props の不一致は、ビルドエラーをトリガーします。
  • 共有 C++ コア：レンダラーは C++ で実装されており、そのコアはプラットフォーム間で共有されます。これにより一貫性が高まり、新しいプラットフォームでの React Native の採用が容易になります。
  • より良いホストプラットフォームの相互運用性：同期およびスレッドセーフなレイアウト計算により、ホストコンポーネントを React Native に埋め込む際のユーザーエクスペリエンスが向上します。これは、同期 API を必要とするホストプラットフォームフレームワークとの統合が容易になることを意味します。
  • パフォーマンスの向上：レンダラーシステムの新しいクロスプラットフォーム実装により、すべてのプラットフォームが、あるプラットフォームの制限によって動機付けられたパフォーマンスの向上から恩恵を受けます。たとえば、ビューのフラット化は元々 Android のパフォーマンスソリューションでしたが、現在では Android と iOS の両方でデフォルトで提供されています。
  • 一貫性：新しいレンダリングシステムはクロスプラットフォームであり、異なるプラットフォーム間での一貫性を維持することが容易になります。
  • 起動の高速化：ホストコンポーネントはデフォルトで遅延初期化されます。
  • JS とホストプラットフォーム間のデータシリアル化の削減：React は、JavaScript とホストプラットフォーム間でデータをシリアル化された JSON として転送していました。新しいレンダラーは、JavaScript インターフェース (JSI) を使用して JavaScript の値に直接アクセスすることで、データ転送を改善します。