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

Question

我正在尝试了解两者之间的最佳选择（作为CTO）

• jss
• 情感
• 样式化组件。

由于这是一个非常主观的话题，所以我将尽量不要提出“太宽”或“离题”的问题。如果没有人回答整个问题，我会尝试自己回答（这里）这个问题，我会问非常封闭的问题：

• 它们三个如何“编译为”（外部css，<style>标签，style=属性）？
• 三个人如何能够与CRA顺利集成（无需过多调整且不会弹出）？
• OpenSource POV（年龄，社区，插件，支持）如何？
• 那表现如何？

请不要关闭这个问题，所以我不需要一些代码风格的意见，并且我想避免主观的观点。

Answer 1

一个很简短的答案（通常还有很多其他答案）

1. CSS模板字符串

SC在运行时使用CSS解析模板字符串。 Emotion有一个babel插件，可以以可以更快地在运行时呈现最终CSS的格式来准备这些已解析的内容。 JSS当前仅支持basic template strings，否则使用对象（有计划增加对模板字符串的支持）

1. 更新样式规则

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

1. 对React的依赖

SC仅起反应。 Emotion的语法无需反应即可使用（css``）。 JSS有单独的软件包：jss（核心，无反应），react-jss（HOC注入类），样式化jss（类似于SC的API）。

1. 插件

当前只有JSS支持插件。

1. 静态提取

   当前只有Emotion支持完全静态提取。 JSS也在努力。 如果您将样式放入单独的文件（something.styles.js）中，然后使用webpack插件提取它们（尽管没有动态值），今天就可以使用JSS进行静态提取。

2. 性能

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

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

Answer 2

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

我喜欢样式化的组件，因为它易于使用。因此，回答（部分）问题是

。

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