跳至主内容

视图扁平化

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

注意

本文涉及正在逐步推出的新架构。

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

React API 的设计遵循声明式原则并通过组件组合实现可复用性，这为直观开发提供了优秀模型。然而在实现层面，API 的这些特性会导致创建深层的 React 元素树，其中大部分 React 元素节点仅影响视图布局而不会在屏幕上实际渲染内容。我们称这类节点为 “仅布局”节点。

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

以下是一个受“仅布局”视图成本影响的典型用例：

假设您需要渲染图像和标题，其中标题由 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 会生成以下树状结构：

示意图一

请注意视图 (2) 和 (3) 属于“仅布局”视图，因为虽然它们在屏幕上渲染，但实际仅对其子组件应用了 10 px 的 margin。

为提升此类 React 元素树的性能，渲染器实现了视图扁平化机制：通过合并或展平这类节点，减少屏幕上渲染的 宿主视图 层级深度。该算法会综合考虑 margin、padding、backgroundColor、opacity 等属性。

视图扁平化算法在设计上被集成到渲染器的差异比较（diffing）阶段，这意味着无需额外 CPU 周期专门优化此类视图的展平。与核心模块的其他部分相同，视图扁平化算法使用 C++ 实现，其优化效果默认在所有支持平台上生效。

在前述示例中，视图 (2) 和 (3) 将通过“差异比较算法”被扁平化，其样式最终会合并到视图 (1) 中：

示意图二

需要强调的是，此优化使渲染器能够避免创建和渲染两个宿主视图。从用户视角看，屏幕显示效果不会发生任何可见变化。