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

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のコンポーネント宣言を信頼できる情報源（source of truth）として使用し、propsを保持するためのC++の構造体を生成します。JavaScriptとホストコンポーネントのpropsが一致しない場合、ビルドエラーが発生します。
  • 共有C++コア: レンダラーはC++で実装され、そのコアはプラットフォーム間で共有されます。これにより一貫性が向上し、新しいプラットフォームへのReact Nativeの導入が容易になります。
  • ホストプラットフォームとの相互運用性の向上: 同期的でスレッドセーフなレイアウト計算により、ホストコンポーネントをReact Nativeに埋め込む際のユーザー体験が向上します。これは、同期APIを必要とするホストプラットフォームのフレームワークとの統合が容易になることを意味します。
  • パフォーマンスの向上: 新しいクロスプラットフォームのレンダラーシステムの実装により、すべてのプラットフォームが、あるプラットフォームの制約を動機として行われたパフォーマンス改善の恩恵を受けることができます。例えば、ビューのフラット化はもともとAndroid向けのパフォーマンスソリューションでしたが、現在はAndroidとiOSの両方でデフォルトで提供されています。
  • 一貫性: 新しいレンダーシステムはクロスプラットフォームであるため、異なるプラットフォーム間での一貫性を保つのが容易です。
  • 起動の高速化: ホストコンポーネントはデフォルトで遅延初期化されます。
  • JSとホストプラットフォーム間のデータシリアライズの削減: ReactはかつてJavaScriptとホストプラットフォーム間でデータをシリアライズされたJSONとして転送していました。新しいレンダラーはJavaScriptインターフェース（JSI）を使用してJavaScriptの値に直接アクセスすることで、データ転送を改善します。