样式化组件如何影响性能？

Question

使用样式化组件会比样式表减慢Web应用程序的速度吗？

如果我在意性能，而没有任何依赖于道具的样式，我应该抛弃样式化组件而使用样式表吗？

Answer 1

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

我在表单元格/行上使用样式化组件，可以一次生成27260 span（单元格）。使用React Profiler，我的表大约花了1050至1250毫秒来生成，一旦我从行和单元格中删除了样式化的组件，表就花了600至630毫秒。

Answer 2

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

在每个版本中，我们都改进了库的性能，以至于很难发现差异（尤其是在服务器端渲染时）。

完全由您决定哪种实现对您的项目最有意义；如果您所有的样式实际上都是静态的，那么纯CSS方法无疑将是性能最高的。但是，这在管理样式表，编写有效的选择器等方面有其自身的警告。