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

View Flattening (ビューのフラット化)

注意

このドキュメントは、現在展開中の新しいアーキテクチャに関するものです。

View Flattening は、React Native レンダラーによる、深いレイアウトツリーを避けるための最適化です。​

React API は、コンポジションを通じて宣言的かつ再利用可能に設計されています。これにより、直感的な開発のための優れたモデルが提供されます。しかし、実装においては、これらの API の特性により、深い React Element Tree が作成され、React Element Node の大部分が View のレイアウトにのみ影響し、画面には何もレンダリングされません。これらのタイプのノードを**「レイアウトのみ」**ノードと呼びます。

概念的には、React Element Tree の各ノードは画面上のビューと 1:1 の関係を持っています。したがって、「レイアウトのみ」ノードの大部分で構成される深い React Element Tree をレンダリングすると、レンダリング時にパフォーマンスが低下します。

「レイアウトのみ」ビューのコストによって影響を受ける一般的なユースケースを以下に示します。

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

jsx
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) は「レイアウトのみ」ビューであることに注意してください。これらは画面にレンダリングされますが、子の上部に 10 px の margin しかレンダリングしないためです。

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

ビューフラット化アルゴリズムは、レンダラーの差分検出段階の一部として設計段階で統合されており、これにより、これらの種類のビューをフラット化する React Element Tree を最適化するために余分な CPU サイクルを使用しないことを意味します。他のコアと同様に、ビューフラット化アルゴリズムは C++ で実装されており、そのメリットはすべてのサポートプラットフォームでデフォルトで共有されます。

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

Diagram two

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