使用动画组件(即 Animated.View)与使用常规组件(即 React Native 中的 View)如果涉及 0 个动画,是否会对性能产生影响?
代码示例:
<View>
<Text>asd</Text>
</View>
VS
<Animated.View>
<Text>asd</Text>
</Animated.View>
我从未见过人们提到使用动画组件时对性能有任何影响,但如果没有的话,为什么 React 开发人员没有将所有组件默认设置为动画。
每当我们有一个组件经常使用内联样式更新本机视图时,使用
Animated.View
以及可选的本机驱动程序可以节省大量重新渲染。
当我们使用
Animated.View
时,在引擎盖后面会发生以下过程:
requestAnimationFrame
在JS中被触发正如我们所看到的,
Animated.View
样式不会触发React Native组件的重新渲染,这就是为什么在这种情况下应该优先使用它们而不是<View />
以避免浪费渲染。
参考:[https://tech.unacademy.com/10-ways-to-avoid-wasted-renders-in-react-native-app-part-2/][1]
Animated 是一个包装器,动画。 将动画值赋予道具,以便它们可以进行有针对性的本机更新而不是反应渲染,以避免每帧的成本。 所以如果是动画的话最好使用它。如果你想在任何地方调用一次,你可以使用 if else 策略作为一个新组件👍
在 React Native 中使用 Animated.View 而不是 View 即使没有动画也会影响性能:
开销:Animated组件具有额外的动画逻辑,这会增加一点性能成本。 优化:像View这样的常规组件针对静态渲染进行了优化,使其在不需要动画时速度更快。 框架复杂性:默认将所有组件设置为动画会增加复杂性和维护问题。
结论: 仅在必要时使用动画组件以保持性能和简单性。