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

ビューフラットニング

注意

このドキュメントは、現在アクティブにロールアウトされている新しいアーキテクチャを参照しています。

ビューフラットニングは、深いレイアウトツリーを回避するためのReact Nativeレンダラーによる最適化です。​

React APIは、宣言的で、コンポジションを通じて再利用可能になるように設計されています。これは、直感的な開発のための優れたモデルを提供します。しかし、実装においては、APIのこれらの特性により、React要素ノードの大部分がビューのレイアウトのみに影響を与え、画面上に何もレンダリングしない、深いReact要素ツリーが作成されます。このようなノードを「レイアウト専用」ノードと呼びます。

概念的には、React要素ツリーの各ノードは画面上のビューと1対1の関係を持つため、「レイアウト専用」ノードで構成される深いReact要素ツリーをレンダリングすると、レンダリング時のパフォーマンスが低下します。

以下は、「レイアウト専用」ビューのコストの影響を受ける一般的なユースケースです。

画像と、TitleComponentによって処理されるタイトルをレンダリングしたいとします。そして、このコンポーネントを、いくつかのマージンスタイルを持つContainerComponentの子として含めます。コンポーネントを分解した後、Reactコードは以下のようになります。

function MyComponent() {
  return (
    <View>                          // ReactAppComponent
      <View style={{margin: 10}} /> // ContainerComponent
        <View style={{margin: 10}}> // TitleComponent
          <Image {...} />
          <Text {...}>This is a title</Text>
        </View>
      </View>
    </View>
  );
}

レンダリングプロセスの一環として、React Nativeは以下のツリーを生成します。

Diagram one

ビュー(2)と(3)は、画面上にレンダリングされますが、子要素の上に10pxのマージンのみをレンダリングするため、「レイアウト専用」ビューです。

このようなReact要素ツリーのパフォーマンスを向上させるために、レンダラーはこれらのノードをマージまたはフラット化し、画面上にレンダリングされるホストビュー階層の深さを削減するビューフラットニングメカニズムを実装しています。このアルゴリズムは、margin、padding、backgroundColor、opacityなどのプロパティを考慮します。

ビューフラットニングアルゴリズムは、レンダラーのdiffingステージの一部として設計によって統合されているため、これらのビューをフラット化するために余分なCPUサイクルを使用しません。他のコア機能と同様に、ビューフラットニングアルゴリズムはC++で実装されており、その利点はサポートされているすべてのプラットフォームでデフォルトで共有されます。

前の例の場合、ビュー(2)と(3)は「diffingアルゴリズム」の一部としてフラット化され、その結果、それらのスタイルはビュー(1)にマージされます。

Diagram two

この最適化により、レンダラーは2つのホストビューの作成とレンダリングを回避できることに注意することが重要です。ユーザーの観点からは、画面上に目に見える変化はありません。