什么是 HOC 组件？
高阶组件（Higher-Order Component，简称 HOC）是 React 中一种非常实用的设计模式，它允许你将通用的逻辑封装到一个组件中，然后通过传递 props 的方式将这些逻辑注入到其他组件中。这种方式可以帮助我们复用代码、减少重复性的工作，提高开发效率。
如何在 TypeScript 中创建 HOC 组件？
虽然 React 中创建 HOC 组件非常简单，但是在 TypeScript 中稍有不同。具体来说，我们在 TypeScript 中创建 HOC 组件时需要用到一些特殊的技巧，以便让 TS 编译器能够正确处理我们的代码。这些技巧包括：
使用泛型：通过使用泛型，我们可以在函数签名中动态地声明我们的 props 和 state 类型，从而为 TS 编译器提供必要的类型信息。
使用类型断言：有时候 TS 编译器并不能很好地推断出函数的返回值类型，这时我们可以使用类型断言来告诉编译器我们的返回类型是什么。
下面是一个使用 TypeScript 创建 HOC 组件的示例代码：
-- -------------------- ---- -------
------ ------ - ------------- - ---- -------
--------- ------------- -
-------- ------
-
-------- ------------- ------- ---------------
----------------- ----------------
- -
----- -------------- - ------- -------
------ ----- ------- ----------------------- ----- --------------- -
-------- -
----- ----- - ---------- -- -
----- ------- - ------------- -- --------------
------ ----------------- ---------- ----------------- --
-
-
-
--------- ---------------- -
----- ------
-
----- ----------- ------- -------------------------------- - -------------- -
-------- -
------ -
-----
---------------------------
------------------------
------
-
-
-
----- ---------------------- - ------------------------
-------- ----- -
------ ----------------------- ----------- --
-
------ ------- ---在这个示例代码中，我们定义了一个名为 withMessage 的 HOC 函数，它接受一个泛型类型为 P 的组件类型 WrappedComponent，并返回一个新的组件类。withMessage 函数内部通过扩展了 React.Component 类的方式定义了一个新的组件类，这个类接受除了 InjectedProps 中声明的 props 之外的所有其他 props。
在这个新的组件类中，我们在 render 方法中对 props 进行了修改，将 message 属性设置为传递过来的 message，如果 message 没有被传递，则使用默认值 'Hello, world!'。最后，我们将修改后的 props 作为参数传递给 WrappedComponent。
最后，我们将使用创建好的 HOC 组件 MyComponentWithMessage 来渲染一个实例化的 MyComponent 组件，并传递了 name 属性。这样，我们就将 MyComponent 组件和 withMessage 函数组合成了一个新的高阶组件，实现了对 message 属性的注入。
总结
在 React 中创建 HOC 组件是一种非常有用的设计模式，它可以帮助我们减少重复代码、提高开发效率。在 TypeScript 中创建 HOC 组件虽然略有不同，但是只要我们掌握了使用泛型和类型断言的技巧，就可以很轻松地创建出自己的 HOC 组件，提高自己的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64702976968c7c53b0e4c8ce