简介
在 React 中，HOC（Higher-order Component）是一个非常流行的编程模式，它可以让你在不改变组件的原有结构的情况下，给组件增加一些功能。比如，给组件增加计时器、状态管理等等。
react-common-hocs 这个 npm 包提供了一些常用的 HOC，可以节约我们的开发时间，同时也能提高开发效率。
接下来，我们将详细介绍 react-common-hocs 的使用方法，并提供一些相关示例代码。
安装
可以使用 npm 进行安装，简单执行以下命令即可：
npm install react-common-hocs --save
使用
在项目中使用 react-common-hocs，需要先引入所需要的 HOC，比如我们需要使用 withMessage 这个 HOC，可以在组件中这样引入：
import { withMessage } from 'react-common-hocs';然后，我们就可以将这个 HOC 和我们的组件进行装饰：
class MyComponent extends React.Component {
// ...
}
export default withMessage(MyComponent);现在，我们就可以在 MyComponent 组件中使用 this.props.showMessage 方法了。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
----------- - -- -- -
----------------------------- ---------
-
-------- -
------ -
---- -------------------------------- --------
--
-
-上面的代码可以实现，当我们点击 Click me 按钮时，页面上会弹出一个简单的提示框，显示 Hello world!。
这就是 react-common-hocs 的一个简单使用教程，接下来我们将介绍更多 HOC 的使用方法。
示例
withMessage
在上面的例子中已经演示了 withMessage 的用法，这里再稍微补充一下，withMessage 可以用于在组件中弹出消息提示框。我们可以在任何时候获取这个 HOC 中提供的 showMessage 方法，使用 showMessage 就可以快速实现一个通知框：
-- -------------------- ---- -------
------ - ----------- - ---- --------------------
----- ----------- ------- --------------- -
----------- - -- -- -
----------------------------- ---------
-
-------- -
------ -
---- -------------------------------- --------
--
-
-
------ ------- -------------------------withMessage 这个 HOC 可以接收一个配置参数，用于配置弹出框的样式和位置等信息，比如：
export default withMessage(MyComponent, { position: 'topRight', theme: 'dark' });withLoading
withLoading 是 react-common-hocs 中常用的 HOC 之一，它可以用于在组件中添加一个 loading 动画，具体使用方法如下：
-- -------------------- ---- -------
------ - ----------- - ---- --------------------
----- ----------- ------- --------------- -
-- ---
-------- -
------ -
-----
------ --------------
-------- ----------
------
--
-
-
------ ------- -------------------------withLoading 这个 HOC 同样可以接收一个配置参数，用于配置 loading 样式、速度等信息，比如：
export default withLoading(MyComponent, { type: 'ball-scale-ripple-multiple', speed: 2 });withConfirm
withConfirm 是一个可用于快速实现一个 confirm 框的 HOC，它可以接收一个确认回调函数和取消回调函数，具体使用方法如下：
-- -------------------- ---- -------
------ - ----------- - ---- --------------------
----- ----------- ------- --------------- -
----------- - -- -- -
------------------------
------ ----------
-------- ---- --- ---- -- ---------
----- -- -- -
-- ----- ------ ------
--
--------- -- -- -
-- ----- ------ ------
--
---
-
-------- -
------ -
---- ---------------------------------------
--
-
-
------ ------- -------------------------withConfirm 这个 HOC 同样可以接收一个配置参数，用于配置 confirm 样式、按钮文字等信息，比如：
export default withConfirm(MyComponent, {
title: 'Confirm',
okText: 'OK',
cancelText: 'Cancel'
});总结
经过上面的介绍，相信您已经对 react-common-hocs 有了初步的了解，它提供了一些常用的 HOC，能够节约我们的开发时间，同时也能提高开发效率。
通过这篇文章，我们能够了解到这些 HOC 的简单使用方法，并在实战中运用它们。希望这些示例能够帮助你更好地使用 react-common-hocs，提高你的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556e781e8991b448d3c62