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中的闭包「柯理化函数」实现的组件代理，我们可以在代理组件中，经过业务逻辑的处理，获取一些信息，最后基于属性等方案，传递给我们最终要渲染的组件
创建和使用高阶组件
高阶组件的应用场景
高阶组件在实际应用中有多种用途：
- 复用逻辑：HOC 可以帮助我们在组件之间复用逻辑，避免重复代码
- 修改 props：HOC 可以用来修改传递给组件的 props，从而改变组件的行为。例如，我们可以使用 HOC 来根据权限级别显示或隐藏组件的某些部分。
- 条件渲染：HOC 可以用来根据特定条件决定是否渲染组件
- 提供额外的功能：HOC 可以用来为组件提供额外的功能，例如错误处理、性能监控或者数据获取。
高阶组件示例
示例 1：权限控制
示例 2：性能监控
假设我们想要跟踪某些组件的性能指标，例如渲染时间。我们可以使用高阶组件来实现这个功能。
