React 高阶组件（Higher Order Component，简称 HOC）是一种在 React 中用于复用组件逻辑的高效技术。本文将详细介绍 React HOC 的概念、使用场景、特点以及如何实现。
HOC 的概念
HOC 是一种将一个组件作为输入，并返回一个新组件作为输出的函数。它接受一个组件作为参数，然后返回一个新的组件，新组件可以增强输入组件的功能，例如：
- 组件的状态管理；
- 渲染属性的注入；
- 条件渲染和渲染劫持；
- 管理组件之间的通信。
简单来说，HOC 就是一个高阶函数，接收一个组件作为参数，返回一个增强版的组件。这个增强版的组件可以在原有组件的基础上添加额外的功能。
HOC 的应用场景
HOC 的应用场景很多，例如：
- 鉴权组件：只有满足一定条件的用户才能访问某些页面，需要对组件进行鉴权。可以使用 HOC 来实现鉴权逻辑。
- 日志组件：在组件执行某些操作时，打印日志信息。可以使用 HOC 实现日志组件。
- 数据请求组件：在组件内部进行数据请求，获取数据并传递给子组件。可以使用 HOC 实现数据请求组件。
HOC 的特点
HOC 具有以下特点：
- HOC 是函数，不是组件。它接收一个组件作为参数，并返回一个新的组件。
- HOC 可以重复使用。一个 HOC 可以用于多个组件，每个使用该 HOC 的组件都将被增强。
- HOC 可以嵌套。即一个 HOC 可以包装另一个 HOC 返回的组件。
HOC 的实现方式
实现一个 HOC 很简单，只需要编写一个接收组件作为参数的函数。
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------------------- -
----- ----------------- ------- --------------- -
-------- -
------ ----------------- --------------- ---
-
-
------ ------------------
-上述代码中，我们定义了一个名为 withHOC 的 HOC 函数，接收一个组件作为输入。在函数内部，我们返回一个新的类组件 EnhancedComponent，该组件不仅包含原始组件（通过 <WrappedComponent {...this.props} /> 注入）的所有属性和方法，还可以在组件内部添加逻辑进行增强。
HOC 的实战示例
现在让我们来实现一个简单的日志组件 HOC，用于在组件的生命周期中打印日志信息。
-- -------------------- ---- -------
------ ----- ---- --------
-------- ---------------------------- -
----- ----------------- ------- --------------- -
------------------- -
--------------------------------------- --------- --- --------
-
-------- -
------ ----------------- --------------- ---
-
-
------ ------------------
-上述代码中，我们定义了一个 withLogger HOC 函数，用于在组件的生命周期中打印日志信息。
现在，让我们使用 withLogger 来增强原始组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- ---------------
----- ----------- ------- --------------- -
-------- -
------ ------- ----------------
-
-
----- ----------------- - ------------------------
------ ------- ------------------上述代码中，我们定义了一个名为 MyComponent 的组件，然后使用 withLogger 来增强这个组件，并导出增强后的组件，即 EnhancedComponent。
现在，我们可以使用 EnhancedComponent 来渲染页面，在控制台中就可以看到 MyComponent 组件生命周期中打印的日志信息了。
总结
本文介绍了 React 高阶组件 HOC 的概念、使用场景、特点以及如何实现，并依据一个简单的日志组件 HOC 示例进行了演示。HOC 是 React 中非常重要的一部分，可以帮助我们实现组件逻辑复用、代码复用等目标，是值得通过学习和使用的技术手段。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e04ec1f6b2d6eab3b646c2