React Hook + Typescript 实现一个类型提示完整的高阶组件（HOC）

前言

最近在对项目内的表单组件进行的优化，在实现高阶组件的过程中发现目前关于 react 高阶组件的文章都比较旧了，很多都是以类组件的形式去实现，与 Typescript 的结合使用也比较难找到示例。因此决定自己写一篇关于 Recat hook + Typescript 实现高阶组件的文章，希望简单直观的让大家学习到高阶组件的使用场景及封装方式。

什么是高阶组件

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

高阶组件其实就是一个函数，这个 函数的参数是一个组件，返回值也是一个组件。功能也就是将传入的组件进行一些通用的处理，再将处理过的组件返回。举个例子：

const WithHelloWorld = (Component) => {const extraProps = 'hello world';const newComponent = (props) => {console.log(WithHelloWorld);return <Component extraProps={extraProps} {...props} />;};return newComponent;
}; 

上面这段代码实现了一个 WithHelloWorld 的高阶组件，功能就是为传入的组件添加一个 extraProps 参数，并且在使用时会自动打印 hello world。

高阶组件的作用

高阶组件的作用其实就是将一些通用的逻辑进行抽离，在实现新的组件时不需要重复实现已有逻辑。下面将将项目中使用的案例。

例如在一个表单中，如果每一个表单项都会有上面的 formLabel 作为字段名，下面的 helperText 帮助用户填写表单。

如果触发了表单验证，还需要再增加一个错误提示。

而除了这些每个表单项都有的东西，中间的表单组件却不尽相同，可能是输入框、选择器、单选框、多选框等等组件，因此需要有一定的拓展性。那么这时候我们就可以通过高阶组件实现将通用功能的抽离，并且能动态传入组件，任意进行拓展。

高阶组件的实现