css in js 的好处?
以前我们在网页开发的时候会有一个概念,“关注点分离”,比如我们的css js html 这三种技术。html仅仅对应网页的结构,css仅仅负责网页的样式,js仅仅负责网页的交互逻辑。比如最好不要写行内样式,行内js。但是react的出现,刚好打破了这一点,他把这三者完美的结合在一起。这有利于组件的隔离。什么意思? 就是组件与组件之间没有过多的依赖,过多的耦合。扯远了。。。
css in js 简单来说
1.我们把css写在js中实际上就是用js去写css ,那么好处就是我们可以在css中使用js定义的变量,比如我们使用的style-components这个库,我们甚至可以使用组件的props当做参数,来改变样式。这使我们写起css更加的灵活。
2.就像我前面说的,我们不再担心全局样式可能会带来的影响,因为组件的样式跟组件一样是独立的。
3.使用style-components我们不必担心去给元素的class命名,因为他会为class随机生成字符串,避免了命名冲突。