React Native 内联样式和性能

Posted 2023-02-21

【中文标题】React Native 内联样式和性能

【英文标题】：React Native inline styles and performance

【发布时间】：2017-01-13 03:49:24

【问题描述】：

执行以下操作：

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

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

<Text style=styles.blueButton />

...

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

【参考方案1】：

从docs 到StyleSheet

性能：

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

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

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

【讨论】：

有趣的是，到 2019 年，任何提及性能的内容都已从上面链接的文档页面中删除。

@LeonidShevtsov 自己刚刚重新访问了这个话题，正要评论同样的事情！

从 v16.12.0 开始（似乎是 2019 年 11 月 14 日），reactjs.org/docs/faq-styling.html 上仍然提到了性能。并非特定于 React Native，但它可能使用完全不同的渲染管道

对于大多数项目而言，任何性能优势都可能无关紧要

【参考方案2】：

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

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

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

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