JS 中的 CSS

'CSS-in-JS' 是一个从样式组件开始并在 Javascript 中定义样式的流程。

样式组件、Emotion、Mantine 等

优点

1. 适用范围较小。
   1. 如果使用css模块，还可以缩小css的范围
2. 与组件定义在同一位置。 （并置）
3. 可以使用Javascript变量。

劣势

1. 运行时开销
2. 您必须下载CSS in JS库文件。
   1. 情感为 7.9KB。
   2. Mantine 是 134KB！

巨大的缺点

1. 频繁插入CSS规则会导致大量的计算工作。
   1. 情感与 CSS 的比较
   2. 使用CSS时，性能提升约50%。
2. 使用SSR时，会出现各种各样的问题。
   1. 如果您查看 Emotion 存储库，会发现很多问题。

CSS-in-JS 使用 Mantine（基于 Emotion）。
性能测量使用 React 开发工具。
性能测量目标是一个30 * 5的Table（组件名称：SheetTable）。

按钮时，将呈现上面的屏幕
• 。
在 React Profiler 中打开录制并按下按钮录制屏幕渲染。
• 测量SheetTable的渲染时间。
• 共执行5次，取平均值。
CSS-in-JS (Mantine)

顺风

结果

• 即使只更改一个单元格代码，性能也能显着提高。 （当然，大部分都是细胞）
• 在 60Hz 显示器上，1 帧为 16ms，但 3 帧 -> 2 帧

结论

• 除非需要使用JS变量，否则使用Tailwind。
• （补充）引入SSR，方便放弃CSS-in-JS。
• 参考号