React 中的高阶组件（HOC）是 React 设计模式中的一种，它允许开发者将一个组件作为参数，并返回一个新的组件。高阶组件提供了一种将组件间复用逻辑的方法，可以使代码更加模块化、更易于维护。
HOC 的定义
在 React 中，高阶组件是一个函数，它接收一个组件作为参数，并返回一个新的组件。高阶组件并不是一个真正的组件，而是一个能够接收组件作为参数，并返回一个新的组件的函数。
function HigherOrderComponent(WrappedComponent) {
return class extends React.Component {
render() {
return <WrappedComponent {...this.props} />
}
}
}在上面的示例代码中，我们定义了一个 HigherOrderComponent 函数，它接收一个组件作为参数 WrappedComponent，并返回一个新的匿名类组件。这个类组件继承 React.Component 类，并通过 render 方法将传入的组件渲染出来。
HOC 的使用方法
使用高阶组件的方式非常简单，只需要将需要增强的组件传入高阶组件函数即可。
const EnhancedComponent = HigherOrderComponent(BaseComponent);
在上面的示例代码中，我们将一个名为 BaseComponent 的组件作为参数传递给 HigherOrderComponent 函数，并将返回值赋值给 EnhancedComponent 常量，这样就得到了一个增强的组件。
HOC 的作用
使用高阶组件可以提供很多额外的功能，比如：
- 属性代理
高阶组件可以使用属性代理，对传入的组件进行属性包装，从而让组件能够拥有更多的属性，或者对属性进行添加、删除、修改等操作。
-- -------------------- ---- -------
-------- --------------------------- -
------ ----- ------- --------------- -
-------- -
----- -------- - -
--------------
---- -----
-
------ ----------------- ------------- --
-
-
-
----- ----------------- - -------------------------在上面的示例代码中，我们定义了一个 withProps 高阶组件，它会将传入的组件增加一个 foo 属性，值为 'bar'。使用这个高阶组件，可以轻松地为任何组件增加属性。
- 渲染劫持
高阶组件还可以用来拦截传入组件的渲染过程，从而对组件进行渲染劫持，以实现自定义的渲染逻辑。
-- -------------------- ---- -------
-------- ----------------------------- -
------ ----- ------- --------------- -
-------- -
------ -
---- --------------------
----------------- --------------- --
------
--
-
-
-
----- ----------------- - ---------------------------在上面的示例代码中，我们定义了一个 withWrapper 高阶组件，它会将传入的组件包裹在一个 div 元素中。使用这个高阶组件，可以轻松地为任何组件增加包装器。
- 状态提升
高阶组件还可以用来将组件间的状态提升到共同的祖先组件中，从而让组件之间共用某些状态。这样可以实现跨级数据共享，提高程序的可维护性。
-- -------------------- ---- -------
-------- --------------------------- -
------ ----- ------- --------------- -
------------------ -
-------------
---------- - -
------ -
-
-------------------- - --------------------------------
-------------------- - --------------------------------
-
----------------- -
--------------- ------ ---------------- - - ---
-
----------------- -
--------------- ------ ---------------- - - ---
-
-------- -
----- -------- - -
--------------
------ -----------------
------------ ---------------------
------------ --------------------
-
------ ----------------- ------------- --
-
-
-
----- ----------------- - -------------------------在上面的示例代码中，我们定义了一个 withState 高阶组件，它会将一个名为 count 的状态和两个状态更新函数，分别传递给传入的组件。使用这个高阶组件，可以轻松地为任何组件增加状态。
总结
高阶组件是一种非常有用的组件复用技术，它提供了一种灵活、可扩展的组件拓展方案。通过高阶组件，我们可以将组件间的复杂逻辑提取到单独的组件中，从而使得组件更加轻量、可复用、易于维护。在实际开发中，开发者需要根据具体的业务需求，选择适当的高阶组件实现方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475ff0f968c7c53b02f63ce