React样式的处理方案

在vue开发中，我们可以基于scoped为组件设置样式私有化！

但是react项目中并没有类似于这样的机制！如果我们想保证"团队协作开发"中，各组件间的样式不冲突，我们则需要基于特定的方案进行处理！

1. 内联样式

内联样式就是在JSX元素中，直接定义行内的样式

编译后的内容

内联样式的优点：

使用简单： 简单的以组件为中心来实现样式的添加
扩展方便： 通过使用对象进行样式设置，可以方便的扩展对象来扩展样式
避免冲突： 最终都编译为元素的行内样式，不存在样式冲突的问题

在大型项目中，内联样式可能并不是一个很好的选择，因为内联样式还是有局限性的：

不能使用伪类： 这意味着 :hover、:focus、:actived、:visited 等都将无法使用
不能使用媒体查询： 媒体查询相关的属性不能使用
减低代码可读性： 如果使用很多的样式，代码的可读性将大大降低
没有代码提示： 当使用对象来定义样式时，是没有代码提示的

2. 使用CSS样式表

CSS样式表应该是我们最常用的定义样式的方式！但多人协作开发中，很容易导致组件间的样式类名冲突，从而导致样式冲突；所以此时需要我们 人为有意识的 避免冲突！

保证组件最外层样式类名的唯一性，例如：路径名称 + 组件名称 作为样式类名
基于 less、sass、stylus 等css预编译语言的嵌套功能，保证组件后代元素的样式，都嵌入在外层样式类中！！

Demo.less

Demo.jsx

CSS样式表的优点：

结构样式分离： 实现了样式和JavaScript的分离
使用CSS所有功能： 此方法允许我们使用CSS的任何语法，包括伪类、媒体查询等
使用缓存： 可对样式文件进行强缓存或协商缓存
易编写：CSS样式表在书写时会有代码提示

当然，CSS样式表也是有缺点的：

产生冲突： CSS选择器都具有相同的全局作用域，很容易造成样式冲突
性能低： 预编译语言的嵌套，可能带来的就是超长的选择器前缀，性能低！
没有真正的动态样式： 在CSS表中难以实现动态设置样式

3. CSS Modules

CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效；产生局部作用域的唯一方法，就是使用一个独一无二的class名字；这就是 CSS Modules 的做法！

第一步：创建 xxx.module.css

第二步：导入样式文件 & 调用

编译后的效果

react 脚手架中对 CSS Modules 的配置

全局作用域

CSS Modules 允许使用 :global(.className) 的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串。

class继承/组合

在 CSS Modules 中，一个选择器可以继承另一个选择器的规则，这称为"组合"

CSS Modules原理

把各个组件中，编写的样式【不经过处理之前，是全局都生效样式】进行私有化处理

把所有样式类名，进行编译混淆，保证唯一性

4. React-JSS

JSS是一个CSS创作工具，它允许我们使用JavaScript以生命式、无冲突和可重用的方式来描述样式

JSS 是一种新的样式策略！

React-JSS 是一个框架集成，可以在 React 应用程序中使用 JSS

它是一个单独的包，所以不需要安装 JSS 核心，只需要 React-JSS 包即可

React-JSS 使用新的 Hooks API 将 JSS 与 React 结合使用

编译后的效果