React HOC高阶组件以及装饰器的使用

一、什么是高阶组件

高阶组件HOC（Higher-Order Components）是React中用于重用组件逻辑的一种高级技术实现模式,
它本身是一个函数,接受一个组件并返回一个新的组件。
hoc解决的问题：
1、HOC支持ES6，比mixins的更优解决方案
2、HOC复用性强，将公用逻辑抽离、共享
3、HOC是纯函数，支持传入参数，增加了其扩展性
4、HOC依赖传入的props，相应状态在父组件维护
hoc弊端：
1、组件之间复用状态逻辑很难,本质是将复用逻辑提升到父组件中,容易产生嵌套地狱
2、由于所有抽象逻辑都被其他 React 组件所隐藏，应用变成了一棵没有可读性的组件树。而那些可见的组件也很难在浏览器的DOM中进行跟踪

二、高阶组件的应用场景举例：

假设需求：
父组件是一个“加法器”组件，每次点击按钮，会将状态+1，然后传给子组件展示。
子组件接受一个展示的数据

（1）【parent.tsx】父组件

（2）【son.tsx】子组件

（3）展示效果

（4）当需求变更

假设子组件是一个第三方组件，不方便修改它的源码渲染逻辑，但是需求变更为：对当前展示数字乘以2
解放方案：
我们可以对父组件的props逻辑更改，但可能在复杂场景下，修改工作量量很大，也很麻烦的情况下
可使用高阶函数实现代码复用。

（5）【HocDom.tsx】高阶组件，让传入的count * 2 再传给子组件

（6）子组件使用高阶组件

（7）效果测试

每次点击按钮，count都会乘以2，例如按钮点击了一次，那么count展示为2

三、装饰器：

什么是装饰器

装饰器是一种函数，写成：@函数名，可以放在类和类方法的定义前面。
装饰器的作用就是为已经存在的函数或对象添加额外的功能。 装饰器应用场景及理解:
装饰器本质上是一个函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能

装饰器的安装、配置、使用：vite举例

高阶函数理论上是可以无限嵌套的，像这样：

我们可以使用装饰器进行装饰，使代码更加明了

（1）安装

react脚手架创建的项目默认是不支持装饰器，需要手动安装：
npm i @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D

（2）配置

【vite.config.ts】文件

【tsconfig.json】文件

（3）使用装饰器