在 React 中，组件是构建用户界面的基本单元。但是，有时候我们需要在组件之间共享一些逻辑或状态，这时候就可以使用 HOC（高阶组件）来组合 React 组件。
什么是 HOC？
HOC 是一种基于组合的设计模式，它可以用来增强组件的功能。它不是 React API 中的一部分，而是一种模式，可以用任何编程语言来实现。
HOC 接受一个组件作为参数，返回一个新的组件。这个新组件可以增强原始组件的功能，例如添加一些状态、逻辑或者渲染条件。
HOC 的优点
使用 HOC 可以让我们复用组件逻辑，避免代码重复。同时，它也能让我们更好地分离关注点，使组件更加专注于自己的职责。
如何使用 HOC？
我们来看一个简单的例子，假设我们有一个 Button 组件，需要在点击时显示一个提示框。我们可以使用 HOC 来实现这个功能：
-- -------------------- ---- -------
------ ----- ---- --------
-------- -------------------- -
------ ----- ------- --------------- -
----------- - -- -- -
------------- -----------
-
-------- -
------ ---------- -------------------------- --------------- ---
-
--
-
-------- ------------- -
------ ------- ---------------- ------------
-
----- -------------- - ------------------
------ ------- ---------------在上面的例子中，我们定义了一个 withAlert 函数，它接受一个组件作为参数，并返回一个新的组件。这个新组件包含了一个点击事件处理函数 handleClick，它会在按钮点击时弹出一个提示框。然后，我们将原始的 Button 组件作为参数传递给 withAlert 函数，得到一个增强后的组件 EnhancedButton，它已经具备了点击事件处理函数。
现在，我们可以像使用普通的 Button 组件一样使用 EnhancedButton 组件了：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------
-------- ----- -
------ -
-----
------ --------
--------------- --
------
--
-
------ ------- ----HOC 的注意事项
虽然 HOC 可以让我们方便地复用组件逻辑，但是它也有一些需要注意的地方。
1. 命名冲突
当我们使用 HOC 时，可能会出现命名冲突的问题。例如，如果我们使用了多个 HOC 来增强同一个组件，那么它们可能会定义相同的属性或方法，导致命名冲突。为了避免这种情况，我们可以使用命名空间来区分不同的 HOC。
2. 性能问题
HOC 可能会对性能产生影响，因为它会在组件树中增加额外的层级。每个 HOC 都会返回一个新的组件，这可能会导致组件的渲染次数增加。为了避免性能问题，我们可以使用 React 的 PureComponent 或者 shouldComponentUpdate 生命周期来优化组件的渲染。
3. 继承问题
HOC 可能会影响组件的继承关系。由于 HOC 是通过组合来实现功能增强的，它并不会继承原始组件的属性或方法。这可能会导致一些问题，例如无法访问原始组件的 ref 属性。为了避免这种情况，我们可以使用 React.forwardRef 来传递 ref 属性。
总结
HOC 是一种非常有用的组件复用模式，它可以让我们更好地分离关注点，避免代码重复。在使用 HOC 时，我们需要注意命名冲突、性能问题和继承问题。如果使用得当，HOC 可以大大提高我们的开发效率，使代码更加简洁、易于维护。
示例代码
下面是一个完整的示例代码，演示了如何使用 HOC 来增强组件的功能。
-- -------------------- ---- -------
------ ----- ---- --------
-------- -------------------- -
------ ----- ------- --------------- -
----------- - -- -- -
------------- -----------
-
-------- -
------ ---------- -------------------------- --------------- ---
-
--
-
-------- ------------- -
------ ------- ---------------- ------------
-
----- -------------- - ------------------
-------- ----- -
------ -
-----
------ --------
--------------- --
------
--
-
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658c0081eb4cecbf2d1530cb