以下代码会执行什么功能:
<Text style={{color: 'blue', fontSize: 30}} />
与其它方案相比,是否具有性能方面的影响:
<Text style={styles.blueButton} />
...
const styles = StyleSheet.create({
blueButton: {
color: 'blue',
fontSize: 30,
}
});
以下代码会执行什么功能:
<Text style={{color: 'blue', fontSize: 30}} />
与其它方案相比,是否具有性能方面的影响:
<Text style={styles.blueButton} />
...
const styles = StyleSheet.create({
blueButton: {
color: 'blue',
fontSize: 30,
}
});
来自StyleSheet
的文档:
性能:
- 从样式对象中创建样式表可以通过ID引用它,而不是每次创建新的样式对象。
- 这也允许仅通过桥发送样式一次。所有后续使用都将引用ID (尚未实现)。
另一个好处是编译时会生成样式错误,而不是运行时。
个人而言,我仍然喜欢使用内联样式(并创建共享样式的新组件),因为它使我的代码更易读,而且性能影响不明显。
如所选答案的评论中提到的那样,RN文档中已经取消了性能评论,但在我的项目中(使用RN的移动游戏,其中使用多个活动的Animated组件),使用Stylesheet
而不是内联样式可以提高性能。
我的主视图中大约有5~10个活动的Animated组件,当我使用内联样式时,UI FPS会降至15~18,但如果我使用Stylesheet,则具有60fps并且几乎没有停顿。请注意,为了看到这些改进,我必须在大多数组件中实现此操作,特别是在Animated组件及其子组件中,但我仍然保留了其他组件中的一些内联样式。
就性能而言,您的UI FPS受到您的js活动的影响。因此,减少/优化JS负载将有助于保持FPS的良好表现。在我的项目中,一些样式值是计算出来的,但它们只需要在初始加载期间计算一次。当我使用内联样式时,这些值在每次重新渲染时都会重新计算,因此使用样式表更加合理,因为不会重新计算。在处理图像资产时,这尤其重要。
总之,尽可能使用Stylesheet。这将有助于长期运行,并避免从内联到样式表的任何不必要的更新。
是的,它会稍微提高性能。但这并不是最重要的。
有很多方法可以提高性能,但增加的性能如此微小,以至于在使用您的应用程序时,没有人会注意到它,因此对于该性能改进没有真正的好处。
所以问题实际上是它是否足以提高性能以至于它是显而易见的。答案几乎肯定是否定的,除非您不断地渲染数百/数千个具有内联样式的组件(这永远不应该发生)。
我更喜欢内联样式加样式实用组件,因为它们编写起来更快,更易于维护(因为您可以更轻松地找到要更改的组件的样式)。此外,您不必任意地给事物命名,这需要大量的时间和精力。