React Native - Animated.View 与常规 View 组件之间的性能差异

Question

使用动画组件（即 Animated.View）与使用常规组件（即 React Native 中的 View）如果涉及 0 个动画，是否会对性能产生影响？

代码示例：

<View>
    <Text>asd</Text>
</View>

VS

<Animated.View>
    <Text>asd</Text>
</Animated.View>

我从未见过人们提到使用动画组件时对性能有任何影响，但如果没有的话，为什么 React 开发人员没有将所有组件默认设置为动画。

Answer 1

每当我们有一个组件经常使用内联样式更新本机视图时，使用

Animated.View

以及可选的本机驱动程序可以节省大量重新渲染。

当我们使用

Animated.View

时，在引擎盖后面会发生以下过程：

• 动画开始时，

  requestAnimationFrame

  在JS中被触发
• 新仓位以JS计算
• JS 序列化新的位置值并将其发送到反应原生桥
• 在桥的另一端，Java (android) 和 C# (iOS) 对其进行反序列化并更新底层 Native View
• 然后框架会在屏幕上更新。

正如我们所看到的，

Animated.View

样式不会触发React Native组件的重新渲染，这就是为什么在这种情况下应该优先使用它们而不是

<View />

以避免浪费渲染。

参考：[https://tech.unacademy.com/10-ways-to-avoid-wasted-renders-in-react-native-app-part-2/][1]

Answer 2

Animated 是一个包装器，动画。 将动画值赋予道具，以便它们可以进行有针对性的本机更新而不是反应渲染，以避免每帧的成本。 所以如果是动画的话最好使用它。如果你想在任何地方调用一次，你可以使用 if else 策略作为一个新组件👍

Answer 3

在 React Native 中使用 Animated.View 而不是 View 即使没有动画也会影响性能：

开销：Animated组件具有额外的动画逻辑，这会增加一点性能成本。 优化：像View这样的常规组件针对静态渲染进行了优化，使其在不需要动画时速度更快。 框架复杂性：默认将所有组件设置为动画会增加复杂性和维护问题。

结论： 仅在必要时使用动画组件以保持性能和简单性。