跳到主要内容

视图扁平化

注意

本文档提及的新架构正在积极推广中。

视图扁平化是 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 将生成以下树

Diagram one

请注意,视图 (2) 和 (3) 是“仅布局”视图,因为它们在屏幕上渲染,但它们仅在其子级顶部渲染 10 pxmargin(外边距)。

为了提高这些类型 React 元素树的性能,渲染器实现了一种视图扁平化机制,该机制合并或扁平化这些类型的节点,从而减少在屏幕上渲染的宿主视图层级深度。此算法会考虑诸如 margin(外边距)、padding(内边距)、backgroundColor(背景颜色)、opacity(不透明度)等属性。

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

在前面的例子中,视图 (2) 和 (3) 将作为“diffing 算法”的一部分被扁平化,其样式将被合并到视图 (1) 中。

Diagram two

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