我遇到了一个React样板，该样板具有很好的代表并且是社区驱动的。样式部分将重点放在样式化组件CSS上，但从未停止转而使用常规CSS样式方法。尽管这吸引了我的兴趣，但使Styled-Component CSS脱颖而出的原因以及为什么需要采用它。
我对样式化组件CSS的理解：
- 组件驱动的思想。现在，您的CSS也是一个组件。- 太酷了！
- 加载所需的内容，并在需要时加载惰性CSS
- 主题提供程序，外观，模块化和动态-这也可以通过其他库来实现
- 组件DOM及其样式的服务器端构造。
我的问题是：
浏览器已经发展为可以将CSS与Javascript解析分开解析，为什么我们要尝试与此背离而又完全适合Javascript？
样式化组件CSS将其javascript库发送到客户端，该库实际上在运行时解析样式，并
<style />在每个组件按需加载时放入标记中。这意味着额外的负载和逻辑最终会导致浏览器的执行周期增加。为什么需要这个？(By the above question i mean for every component loaded, corresponding CSS is computed, created and inserted in head via
styletag / Multiple style tags - Re-inventing CSS interpreters)Does continuous computed style text banging via
<style />in the head tag cause browser reflow/repaint ?What are the performance advantages i get from this?
With add-on libraries / options like Post-CSS & SCSS classname hashing for dynamic classnames which pretty much solves the problem that everyone states. Why SC still ?
Community, please clear the air for me or correct me if i am wrong.
Some good articles that talks about repaint or DOM re-flow how it is performance expensive for browser when CSS styles are modified.
- https://developers.google.com/speed/articles/reflow
- http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
- https://www.sitepoint.com/10-ways-minimize-reflows-improve-performance/
- https://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
- https://developer.mozilla.org/zh-CN/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information
当您同时混合使用Javascript和HTML（即JSX）和CSS（JSS或其他）时，您会将组件变成一个可放入单个文件的实体模块。您不再需要将样式保存在单独的文件中。
然后，发生了功能上的魔术：由于JSX是返回“ HTML”的原始数据的纯函数（不是真的），所以CSS-in-JS是返回“ CSS”的纯函数或原始数据（也不是真的） ）。从这一点来看，我认为值得阅读有关JSX和CSS-in-JS的文章。
不仅在运行时。由于CSS-in-JSS只是返回CSS的数据功能，因此您可以在任何平台上使用它。以Node为例，添加SSR，您便
style在响应正文中将元素交付给浏览器，因此将其解析，就像原始交付CSS的情况一样。因为它像React或Redux，jQuery以及其他任何lib一样在开发中很方便，所以它付出了网络负载和浏览器性能的代价。
您选择图书馆是因为它可以解决问题。如果似乎没有问题，为什么还要使用库，对吗？
有太多的事情迫使回流。
浏览器很聪明。如果样式没有更改，他们甚至不会尝试重绘。这并不意味着他们不计算差值，这会花费CPU时间。
关于样式（重新）计算的范围和复杂性有很好的介绍，深入了解该主题确实值得一读。