React Native内联样式和性能

Question

以下代码会执行什么功能：

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

与其它方案相比，是否具有性能方面的影响：

<Text style={styles.blueButton} />

...

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

- Martin Konicek

Answer 1

来自StyleSheet的文档:

性能:

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

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

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

- FuzzyTree

---

有趣的是，到了2019年，文档页面中与性能有关的任何提及都被删除了。 - Leonid Shevtsov

@LeonidShevtsov 我刚刚也在重新审视这个话题，正想发表同样的观点！ - Lee Brindley

截至v16.12.0（似乎是2019年11月14日），https://reactjs.org/docs/faq-styling.html仍然提到了性能问题。但这并不特定于React Native，后者可能采用完全不同的渲染管道。 - Jonas.z

大多数项目来说，任何性能提升都可能是微不足道的。 - ICW

他们仍然提到它在网站的某个部分 https://reactnative.dev/docs/view - fannolo

Answer 2

如所选答案的评论中提到的那样，RN文档中已经取消了性能评论，但在我的项目中（使用RN的移动游戏，其中使用多个活动的Animated组件），使用Stylesheet而不是内联样式可以提高性能。

我的主视图中大约有5~10个活动的Animated组件，当我使用内联样式时，UI FPS会降至15~18，但如果我使用Stylesheet，则具有60fps并且几乎没有停顿。请注意，为了看到这些改进，我必须在大多数组件中实现此操作，特别是在Animated组件及其子组件中，但我仍然保留了其他组件中的一些内联样式。

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

总之，尽可能使用Stylesheet。这将有助于长期运行，并避免从内联到样式表的任何不必要的更新。

- Jo E.

Answer 3

是的，它会稍微提高性能。但这并不是最重要的。

有很多方法可以提高性能，但增加的性能如此微小，以至于在使用您的应用程序时，没有人会注意到它，因此对于该性能改进没有真正的好处。

所以问题实际上是它是否足以提高性能以至于它是显而易见的。答案几乎肯定是否定的，除非您不断地渲染数百/数千个具有内联样式的组件（这永远不应该发生）。

我更喜欢内联样式加样式实用组件，因为它们编写起来更快，更易于维护（因为您可以更轻松地找到要更改的组件的样式）。此外，您不必任意地给事物命名，这需要大量的时间和精力。

- ICW