样式组件如何影响性能？答案

【问题标题】：How styled-components affect performance?样式组件如何影响性能？
【发布时间】：2019-05-01 12:19:00
【问题描述】：

使用 styled-components 是否比样式表更会降低 Web 应用程序的速度？

如果我关心性能并且没有任何依赖于 props 的样式，我应该放弃 styled-components 并改用样式表吗？

【问题讨论】：

【解决方案1】：

当你有很多小组件时，同时使用 styled-component 渲染，性能开销可能是有意义的。绝对值得测试以删除小元素上的样式组件。

我在表格单元格/行上使用样式组件，它可以一次生成 27260 span（单元格）。使用 React 分析器，我的表格生成大约需要 1050-1250 毫秒，当我从行和单元格中删除样式组件后，它会花费 600-630 毫秒。

【讨论】：

【解决方案2】：

运行时 CSS-in-JS 库总会有一些开销，因为它最终会做更多的工作。但是对于这种开销，您还可以获得很大的灵活性和功能。

每个版本我们都改进了库的性能，以至于差异相对不易察觉（尤其是在服务器端渲染时。）

完全由您来选择对您的项目最有意义的实现方式；如果您的所有样式实际上都是静态的，那么纯 CSS 方法肯定是最高效的。但是，在管理样式表、编写高效的选择器等方面，它也有一些注意事项。

【讨论】：

有兴趣知道将它与 react-native 一起使用是否有任何性能影响，因为在该平台中设置样式规则的模型与 web 完全不同
我立即看到了差异，将单个组件切换为使用样式化组件，并且在移动设备上出现了许多令人头疼的问题、延迟峰值、抖动，性能上的巨大差异。在你犯我犯的错误之前在一个小项目上演示它。在你问之前，是的，这个应用程序已经过优化、压缩等。它甚至不比编写 jsx 对象样式快。