样式组件如何影响性能？

Question

与样式表相比，使用样式化组件会降低 Web 应用程序的速度吗？

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

Answer 1

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

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

Answer 2

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

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

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