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

Question

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

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

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

• 他们三个如何才能“编译为”（外部CSS，<style>标记，style=属性）？
• 他们三个如何能够与CRA顺利集成（无需进行过多调整且不会弹出）？
• 开源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注入类），样式化jss（类似于API的SC）。

4. 外挂程式

当前，只有JSS支持插件。

5. 静态提取

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

6. 性能

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

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