在 React 中，我们常常需要将一些逻辑应用到多个组件中，这时候就可以使用 Higher Order Component(HOC) 来提升组件的复用性。HOC 是一个函数，接收一个组件作为参数，并返回一个新的组件。
HOC 的基本用法
HOC 的基本用法很简单，我们可以定义一个 HOC 函数，接收一个组件作为参数，并返回一个新的组件，例如：
-------- ------------------ -
------ --------------- -
---------------------- ----------------- ---- -------- ------
------ ---------- ---------- --
-
-这个 HOC 函数接收一个组件作为参数，返回一个新的组件，新的组件在渲染时会输出组件名称和 props。我们可以使用这个 HOC 函数来包装我们的组件：
-------- ------------------ - ------ ----------- ------------------- - ----- ------------------ - --------------------
这样，我们就得到了一个新的组件 MyComponentWithLog，它会在渲染时输出组件名称和 props。我们可以像使用普通组件一样使用它：
------------------- ------------ --
HOC 的高级用法
除了简单的日志输出，HOC 还可以实现更复杂的逻辑，例如：
条件渲染
我们可以定义一个 HOC 函数，接收一个条件作为参数，并返回一个新的组件。新的组件会根据条件渲染原始组件或者不渲染任何内容，例如：
-------- ------------------------ -
------ ------------------- -
------ --------------- -
------ ---------------- - ---------- ---------- -- - ----
-
-
-这个 HOC 函数接收一个条件作为参数，返回一个新的函数，这个函数接收一个组件作为参数，返回一个新的函数，这个函数接收组件的 props，根据条件渲染原始组件或者不渲染任何内容。我们可以使用这个 HOC 函数来包装我们的组件：
-------- ------------------ - ------ ----------- ------------------- - ----- ------------------------ - ------------------- -- ------------------------
这样，我们就得到了一个新的组件 MyComponentWithCondition，它会根据 props.name 是否存在来渲染原始组件或者不渲染任何内容。我们可以像使用普通组件一样使用它：
------------------------- ------------ --
生命周期方法
我们可以定义一个 HOC 函数，接收一个生命周期方法作为参数，并返回一个新的组件。新的组件会在对应的生命周期方法中执行逻辑，例如：
-------- ------------------------ -
------ ------------------- -
------ ----- ------- --------------- -
------------------- -
---------------------
-
-------- -
------ ---------- --------------- --
-
-
-
-这个 HOC 函数接收一个生命周期方法作为参数，返回一个新的函数，这个函数接收一个组件作为参数，返回一个新的类组件，新的类组件在对应的生命周期方法中执行逻辑。我们可以使用这个 HOC 函数来包装我们的组件：
-------- ------------------ - ------ ----------- ------------------- - ----- ------------------------ - ------------------- -- - ---------------------- ------------------- ------- ---- -------- ------ ---------------
这样，我们就得到了一个新的组件 MyComponentWithLifecycle，它会在 componentDidMount 生命周期方法中输出组件名称和 props。我们可以像使用普通组件一样使用它：
------------------------- ------------ --
总结
使用 Higher Order Component(HOC) 可以帮助我们提升组件的复用性，实现更高级的逻辑。我们可以定义一个 HOC 函数，接收一个组件作为参数，并返回一个新的组件。新的组件可以根据需要渲染原始组件或者不渲染任何内容，执行复杂的逻辑，或者在生命周期方法中执行逻辑。使用 HOC 可以让我们更加灵活地组合组件，提高代码的复用性和可维护性。
示例代码：https://codesandbox.io/s/hoc-example-0l4j4
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/658a3afceb4cecbf2df6b9bc