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を必要とするホストプラットフォームフレームワークとの統合が容易になります。
• パフォーマンスの向上: 新しいレンダラーシステムのクロスプラットフォーム実装により、すべてのプラットフォームが、1つのプラットフォームの制限によって動機付けられた可能性のあるパフォーマンスの向上から恩恵を受けます。たとえば、ビューのフラット化はもともとAndroidのパフォーマンスソリューションでしたが、現在はAndroidとiOSの両方でデフォルトで提供されています。
• 一貫性: 新しいレンダリングシステムはクロスプラットフォームであるため、異なるプラットフォーム間で一貫性を保つのが容易です。
• 起動の高速化: ホストコンポーネントはデフォルトで遅延初期化されます。
• JSとホストプラットフォーム間のデータシリアライズの減少: Reactは以前、JavaScriptとホストプラットフォーム間でシリアライズされたJSONとしてデータを転送していました。新しいレンダラーは、JavaScript Interfaces（JSI）を使用してJavaScript値に直接アクセスすることにより、データの転送を改善します。