css - React 的样式化组件 vs jss vs 情感

Question

我试图了解（作为首席技术官）之间的最佳选择

• jss
• 感情
• 样式组件。

我会尽量不要让这个问题“太宽泛”或“离题”，因为这是一个非常主观的话题。如果没有人回答整个问题，我会尝试自己回答（在这里）这个问题，我会问非常封闭的问题：

• 他们三个如何“编译”（外部css、<style>标签、style=属性）？
• 他们三个如何才能与 CRA 顺利集成（无需过多调整且无需弹出）？
• OpenSource POV（年龄、社区、插件、支持）呢？
• 性能怎么样？

请我不希望这个问题结束，所以我不想要一些代码风格的意见，我想避免主观的 POV。

Answer 1

一个非常简短的答案（一般来说还有更多）

1. CSS 模板字符串

SC 在运行时使用 CSS 解析模板字符串。Emotion 有一个 babel 插件，可以以一种可以在运行时更快地呈现最终 CSS 的格式准备这些解析的东西。JSS 目前仅支持基本模板字符串，否则使用对象（有计划添加对模板字符串的更好支持）

2. 更新样式规则

SC 和 Emotion 在更新动态样式时会生成新的 CSS 规则，JSS 会更新现有规则（注意您可以在开发工具的样式选项卡中看到更新的规则，但在样式标签中看不到）：

3. 对 React 的依赖

SC 只是反应。Emotion 有一种可以在没有反应的情况下使用的语法（css``）。JSS 有单独的包：jss（核心，无反应）、react-jss（HOC 注入类）、styled-jss（SC 类 API）。

4. 插件

目前只有 JSS 支持插件。

5. 静态提取

   目前只有 Emotion 支持全静态提取。JSS 也在努力。如果您将样式放入单独的文件（something.styles.js）并使用 webpack 插件提取它们（虽然没有动态值），那么您现在可以使用 JSS 进行静态提取。

6. 表现

http://necolas.github.io/react-native-web/benchmarks/

7. 它们都使用样式标签生成实际的 CSS。

Answer 2

作为上面的答案，我也没有听说过jss和情感。可能是因为它们与 React 结合起来并不常见。我自己使用过常规 CSS、内联样式、CSS 模块以及现在最新的样式化组件。

我喜欢 Styled 组件，因为它易于使用。所以回答（一些）你的问题是。

1. 见图片。这就是它与 Styled Components 一起编译的方式。它创建了独特的类。
2. 不需要弹出。只需从 npm 导入并使用
3. 认为它变得越来越流行，社区似乎也喜欢它。总是有不同的意见，也有很多人不喜欢在组件中混合样式和 JS 代码。
4. 真的没有检查性能，但它似乎很快。=)