React原生内联样式和性能

Question

执行以下操作：

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

与以下各项相比，是否有任何性能影响：

<Text style={styles.blueButton} />

...

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

Answer 1

从StyleSheet的docs

性能：

• 从样式对象创建一个样式表，这样就可以通过ID引用它，而不是每次都创建一个新的样式对象。
• 它还允许通过桥只发送一次样式。所有后续使用都将引用一个id (尚未实现)。

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

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

Answer 2

正如所选答案的注释中所提到的，性能注释已从RN文档中删除，但在我的项目(使用RN的手机游戏，使用多个活动动画组件)中，使用Stylesheet而不是内联样式有助于提高性能。

在我的主视图中，大约有5~10个动画组件是活动的，当我使用内联样式时，UI FPS会下降到15~18，但如果我使用样式表，它会有60fps，几乎没有交错。请注意，我必须在大多数组件中实现这一点，特别是动画组件及其子组件，为了看到改进，我仍然在其他组件中保留了一些内联样式。

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

从长远来看，它将有助于避免从内联到样式表的任何不必要的更新。