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 结合使用

编译后的效果

但是从 react-jss 第10版本之后，不支持在类组件中使用，只能用于函数组件中！ 如果想在类组件中使用，还需我们自己处理一下！

---

5. styled-components

目前在React中，还流行 CSS-IN-JS 的模式：也就是把CSS像JS一样进行编写；其中比较常用的插件就是 styled-components！

$ yarn add styled-components styled-components.com/docs/basics…

创建一个样式的js文件，例如：style.js 想要有语法提示，可以安装vscode插件：vscode-styled-components

组件中使用

编译后的效果

---

上面介绍了几种常用的React样式策略，这几种策略并没有绝对的好或坏，都各有优缺点，可以根据实际的业务场景去使用。

高阶组件（HOC）

HOC(Higher-order component)是一种React 的进阶使用方法，主要还是为了便于组件的复用。强调一点，HOC本身并不是 React API, 它就是一个方法，一个接收一个组件作为参数，返回一个增强的组件的方法

高阶组件通常用于在组件之间复用逻辑，例如状态管理、数据获取、访问控制等。

HOC 的一个常见示例是 React-Redux 的 connect 函数，它将 Redux store 连接到 React 组件，使组件可以访问和更新 store 中的状态

利用JS中的闭包「柯理化函数」实现的组件代理，我们可以在代理组件中，经过业务逻辑的处理，获取一些信息，最后基于属性等方案，传递给我们最终要渲染的组件

创建和使用高阶组件

高阶组件的应用场景

高阶组件在实际应用中有多种用途：

1. 复用逻辑：HOC 可以帮助我们在组件之间复用逻辑，避免重复代码
2. 修改 props：HOC 可以用来修改传递给组件的 props，从而改变组件的行为。例如，我们可以使用 HOC 来根据权限级别显示或隐藏组件的某些部分。
3. 条件渲染：HOC 可以用来根据特定条件决定是否渲染组件
4. 提供额外的功能：HOC 可以用来为组件提供额外的功能，例如错误处理、性能监控或者数据获取。

高阶组件示例

示例 1：权限控制

示例 2：性能监控

假设我们想要跟踪某些组件的性能指标，例如渲染时间。我们可以使用高阶组件来实现这个功能。