React Native内联样式和性能

Question

以下内容：

<Text style={{color: 'blue', fontSize: 30}} />

与以下相比，有任何性能影响：

<Text style={styles.blueButton} />

...

const styles = StyleSheet.create({
  blueButton: {
    color: 'blue',
    fontSize: 30,
  }
});

Answer 1

来自StyleSheet的{​​{3}}

  

性能：

     

  
• 从样式对象制作样式表可以通过ID引用它，而不是每次都创建一个新的样式对象。
  
• 它还允许仅通过桥发送一次样式。所有后续用途都将引用一个id（尚未实现）。
  

另一个好处是样式错误将在编译时生成，而不是运行时。

我个人仍然喜欢使用内联样式（并为共享样式创建新组件），因为它使代码对我来说更具可读性，而且性能影响并不明显。

Answer 2

如所选答案的注释中所述，性能注释已从RN文档中删除，但是在我的项目（使用RN且使用多个有效Animated组件的移动游戏）中，使用Stylesheet代替了内联样式有助于提高性能。

我的主视图中有5到10个动画组件处于活动状态，当我使用内联样式时，UI FPS下降到15到18，但是如果使用样式表，它的60fps几乎没有交错。请注意，为了查看这些改进，我必须在大多数组件（尤其是Animated组件及其子组件）中实现此功能，但在其他组件中仍然存在一些内联样式。

在性能方面，您的UI FPS受js活动的影响。因此，减少/优化JS负载将有助于保持FPS性能更好。在我的项目中，计算了一些样式值，但是仅在初始加载期间需要计算它们。当我使用内联样式时，这些值将在每次重新渲染时进行计算，因此使用样式表更为合理，因为不会进行重新计算。在处理图像资产时，这一点尤其重要。

最重要的是，请尽可能使用样式表。从长远来看，这将有所帮助，并且避免了从内联到样式表的任何不必要的更新。