在Reactjs中使用样式组件比使用css模块有什么好处

Question

我正在研究在React应用程序中设置页面样式的最佳方式。我在react中看到了很多可以样式化的库，比如Styled Components，Glamor，CSS Modules。

在我目前的项目中，我正在使用CSS模块(主要是为了摆脱css冲突和页面特定的CSS)。我用谷歌搜索了很多关于为什么我应该使用样式组件和CSS-in-JS的问题，但我没有得到任何具体的答案。所以我的问题是，使用CSS-in-JS或样式组件是否有实际的性能优势，或者它只是语法上的糖。

Answer 1

我对这两种技术都有经验，使用过Radium ( JS库中的另一个CSS )，目前正在我的项目中使用CSS模块。样式化组件肯定比Radium好得多，因为它们允许你样式化:悬停状态等。但在我看来，CSS模块仍然是最好的选择，特别是当你看到你的项目将比10-50个组件更大的时候。在JS库中跨CSS共享代码是一场噩梦。另一方面，CSS模块允许您组合其他类，从其他CSS文件导入变量，甚至JS也可以从CSS导入变量。

Answer 2

在基于React的生态系统中，我喜欢样式化组件胜过任何其他编写css的方式的原因之一是，它强制执行最佳实践。正如有人在那里写的那样，在使用样式化组件的同时进行代码共享是一场噩梦，我完全同意这一点，这就是强制执行部分的用武之地。如果你不是在写真正的模块化组件，这是React组件层次结构应该如何设计的(组合原子组件来构建功能丰富的模块)，你肯定会多次重写类似的样式。但是，如果您可以使用样式组件(如果您喜欢的话，甚至内联样式)，以一种真正自下而上的方式拆分和组合组件，那么代码共享就不再是问题。进一步的代码共享不应该是在样式级别讨论的问题，在大多数情况下，共享封装应该是组件级别的东西。在我看来，CSS modules仅仅是一个className作用域限制工具，而样式组件在基于React的项目中提供了一种更具声明性的样式设置方法。

接下来是我还不能理解的一个缺点，那就是组件样式导致的嵌套组件结构。我试图在命名我的样式组件时保持更多的语义意识，但我相信可能会有其他技术来解决这一问题。我自己并不觉得这是一个很大的问题，因此我也没有为此付出太多的努力。

样式化组件的性能可能会比css模块稍差一些，因为创建样式化组件和渲染组件肯定会有一些开销，但这只是一个微小的差异。

Answer 3

可以使用普通的HTML属性，如果你想的话你可以混入JS，它支持状态，嵌套和媒体查询。不，它不会全部以style="“结束，而是创建一个”真正的“class=属性，并将CSS拖入head，就像css-class=一样。

如果定制组件只接受className作为属性，它甚至允许你设计定制组件的样式(不仅仅是HTML类)，所以：

const Button = (props) => <button className={props.className}>{props.children}</button>

const CustomButton =styled(按钮) display: inline-block; padding: 5px; const Item = () =>单击我！

即使它和其他技术一样也有缺点。主要问题是，在多个项目之间共享代码可能会变得非常困难

如果你最看重的是速度，那么你可以在你的web应用中使用富有魅力或风格的组件。在字符串中为样式组件编写样式可能是不寻常的，但访问者会喜欢快速加载的网页。如果你决定使用styled-components，不要忘了使用install plugin to support syntax highlighting in strings或者帮助创建一个新的样式组件。

Sass/css和内联样式也非常快，但如果您决定在React Native应用程序中重用您的代码，请准备重写样式表。但另一方面，css和其他样式预处理器是web应用程序的一个很好的选择。