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

Question

使用动画组件(即 Animated.View)与使用常规组件(即 View in react native 如果涉及 0 个动画)时是否会对性能产生影响？

代码示例:

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

VS

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

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

Answer 1

每当我们有一个经常使用内联样式更新 Native View 的组件时，使用 Animated.View 与可选的 native 驱动程序一起节省了大量的重新渲染。
当我们使用 Animated.View ，下面的过程发生在幕后:

在动画开始时，requestAnimationFrame在 JS

中被解雇

新仓位计算在 JS

JS 序列化新的位置值并将它们发送到 react-native 桥

在桥的另一端，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]