样式部分更多地强调了样式化组件CSS,但从未停止过切换到传统的CSS样式方法.虽然这引起了我的兴趣,但是什么使得Styled-Component CSS脱颖而出,为什么需要采用它.
我对Styled component CSS的理解：
>组件驱动的思想.您的CSS现在也是一个组件. – 这很酷！
>加载你需要的东西,当你需要时,有点懒惰的CSS
>主题提供者,皮肤,模块化和动态 – 这也可以通过其他库实现
>组件DOM的服务器端构造及其样式.
我的问题是：
>浏览器的发展是为了与Javascript分开解析CSS
解析,为什么我们试图偏离这一点并适应所有人
JavaScript的？
> Styled-component CSS将其javascript库发送到客户端,
它实际上在运行时解析样式并放在< style中
/>每个组件按需加载时标记.这意味着额外的负载
和逻辑最终有助于浏览器的执行周期.
为什么需要这个？
(通过上面的问题,我的意思是每个组件加载相应的CSS计算和创建并通过样式标签/多个样式标签插入头部 – 重新发明CSS解释器)
>是否通过< style />连续计算样式文本？在里面
head标签导致浏览器重排/重绘？
>我从中获得了哪些性能优势？
社区,请为我清空或纠正我,如果我错了.
一些关于重绘或DOM的好文章重新介绍了修改CSS样式时浏览器的性能代价.
> 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/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information
解决方法
Browsers are evolved to parse CSS separately from Javascript parsing,why are we trying to deviate from this and fit all in Javascript?
当您混合使用Javascript和HTML(即JSX)以及CSS(JSS或其他)时,您可以使组件成为适合单个文件的可靠模块.您不再需要将样式保存在单独的文件中.
然后,功能魔术发生：因为JSX是原始数据的纯函数,返回“HTML”(不是真的),就像css-in-JS是纯函数或返回“CSS”的原始数据一样(也不是真的) ).从这一点来说,我认为它值得reading about JSX和also about CSS-in-JS.
Styled-component CSS ships its javascript library to the client end,which actually parses styles at the runtime and put inside
<style />tag when each component loads on demand. This means extra load and logic eventually contributing to execution cycles on browser.
不仅在运行时.因为css-in-JSS只是返回CSS的数据的函数,所以您可以在任何平台上使用它. Take Node,添加SSR,你将样式元素传递给响应体中的浏览器,因此解析就像在原始的CSS交付情况下一样.
Why need this?
因为它在开发方面很方便,就像React或Redux一样,就像jQuery一样,就像任何其他lib一样,它会带来网络负载和浏览器性能成本.
你拿一个图书馆是因为它解决了一个问题.如果似乎没有问题,为什么要使用库,对吧？
Does continuous computed style text banging via
<style />in the head tag cause browser reflow/repaint ?
有so many things that force reflow.
浏览器很聪明.如果样式没有改变,他们甚至不会尝试重新绘制.这并不意味着他们不计算差异,这会花费cpu时间.
the scope and complexity of style (re)calculations有一个很好的介绍,更深入地理解这个主题真的值得一读.
