跳转到主要内容

视图扁平化

注意

本文档指的是正在积极推广的新架构。

视图扁平化是 React Native 渲染器的一项优化，旨在避免深层布局树。​

React API 的设计宗旨是通过组合实现声明式和可重用性。这为直观开发提供了出色的模型。然而，在实现中，API 的这些特性导致创建了深层的 React 元素树，其中绝大多数 React 元素节点仅影响 View 的布局，而不在屏幕上渲染任何内容。我们将这些类型的节点称为“仅布局”节点。

从概念上讲，React 元素树的每个节点都与屏幕上的一个视图具有 1:1 的关系，因此渲染由大量“仅布局”节点组成的深层 React 元素树会导致渲染期间的性能下降。

这是一个受“仅布局”视图成本影响的常见用例。

假设你想渲染一个图像和一个标题，该标题由 TitleComponent 处理，并且你将此组件作为具有某些 margin 样式的 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 像素的 margin。

为了提高这些类型的 React 元素树的性能，渲染器实现了一种视图扁平化机制，该机制合并或扁平化这些类型的节点，从而减少屏幕上渲染的主机视图层级的深度。此算法考虑了诸如 margin、padding、backgroundColor、opacity 等属性。

视图扁平化算法在设计上被集成为主渲染器的差异比较阶段的一部分，这意味着我们不会使用额外的 CPU 周期来优化 React 元素树扁平化这些类型的视图。与核心的其余部分一样，视图扁平化算法在 C++ 中实现，其优点默认在所有受支持的平台上共享。

在前面的示例中，视图 (2) 和 (3) 将作为“差异比较算法”的一部分进行扁平化，因此它们的样式将合并到视图 (1) 中

Diagram two

重要的是要注意，此优化使渲染器可以避免创建和渲染两个主机视图。从用户的角度来看，屏幕上没有可见的变化。