跳到主要内容

视图扁平化

注意

本文档引用了新架构，该架构正在积极推广中。

视图扁平化是 React Native 渲染器的一种优化手段，旨在避免生成过深的布局树。​

React API 的设计初衷是通过组合来实现声明式和可重用性。这为直观开发提供了一个极佳的模型。然而在实现层面，API 的这些特性会导致创建出极深的 React 元素树，其中绝大多数 React 元素节点仅影响视图的布局，而不会在屏幕上渲染任何内容。我们将这类节点称为“仅布局 (Layout-Only)”节点。

从概念上讲，React 元素树中的每个节点都与屏幕上的视图存在 1:1 的关系，因此，如果渲染一棵包含大量“仅布局”节点的深层 React 元素树，会导致渲染性能下降。

以下是一个受“仅布局”视图开销影响的常见用例。

假设你想要渲染一张图片和一个由 TitleComponent 处理的标题，并将此组件作为带有 margin 样式的 ContainerComponent 的子项。分解组件后，React 代码如下所示：

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 元素树的性能，渲染器实现了一种视图扁平化机制，用于合并或扁平化这些类型的节点，从而减少屏幕上渲染的 宿主视图 (host view) 层级深度。该算法会考虑 margin、padding、backgroundColor、opacity 等属性。

视图扁平化算法在设计上被集成在渲染器的 diffing（差异对比）阶段，这意味着我们无需消耗额外的 CPU 周期来优化 React 元素树并扁平化这些视图。与核心库的其他部分一样，视图扁平化算法是使用 C++ 实现的，其带来的性能提升在所有支持的平台上默认共享。

在前面的示例中，视图 (2) 和 (3) 会在“diffing 算法”过程中被扁平化，其结果是将它们的样式合并到视图 (1) 中。

Diagram two

值得注意的是，此优化允许渲染器避免创建和渲染两个宿主视图。从用户的角度来看，屏幕上没有任何可见的变化。