前言
在 React 开发中，我们经常会遇到需要在组件间传递 props 的情况。有些时候，我们不想通过 props 来传递一些状态，这时候可以使用高阶组件 (Higher-Order Component, HOC)。
jedifocus.hocs 是一个使用了 HOC 接口通用编程模式的 npm 包，利用了 React 组件的继承机制，让用户可以定义应该在每个组件渲染时注入到组件中的新 props。
在本文中，我们将一步步教你如何使用 jedifocus.hocs。
安装
在项目中使用 npm 包 jedifocus.hocs 非常方便，只要在你的项目中使用以下命令即可：
npm install --save jedifocus.hocs
安装完成后，在你的组件中引入 HOC，就可以开始使用了。
示例
我们通过一个示例来说明 jedifocus.hocs 的使用。
首先，我们创建一个简单的组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
-------- -
----- - ---- - - -----------
------ -
-----
---------- ------------
------
-
-
-MyComponent 需要一个名字，然后输出 “Hello, name!”。现在，我们需要添加一些状态到这个组件中，让这个组件变得更加有用。
我们可以找到 jedifocus.hocs 中的 withCounter HOC。这个 HOC 可以给输入的组件添加一个计数器状态，并且返回一个新的组件。新组件有一个名叫 counter 的状态和一个名叫 incrementCounter 的方法。
现在，将 MyComponent 传入 withCounter。我们可以通过组合的方式将这两个 HOC 连接起来。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ---------- - ---- -----------------
----- ----------- ------- --------------- -
-------- -
----- - ----- -------- ---------------- - - -----------
------ -
-----
---------- ------------
----------- -------------
------- -------------------------------- -----------
------
-
-
-
------ ------- -------------------------------------在上面的代码中，我们使用 withLogger 和 withCounter 包装了 MyComponent。withLogger HOC 将每次组件渲染前、渲染完成后和卸载时的时间戳打印到控制台中，方便了解渲染和卸载的时间和顺序。
接着，我们创建一个使用 MyComponent 的 App：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ----------------
----- --- ------- --------------- -
-------- -
------ -
------------
----------------
--
-
-
-
------ ------- ----现在，我们就可以在浏览器中看到：
Hello, jedifocus! Counter: 0 Click Me
通过点击 “Click Me” 按钮，可以增加 counter 状态的值。
总结
本文中，我们介绍了 jedifocus.hocs 的使用方法，以及如何使用 HOC 对 React 组件进行扩展。
通过 jedifocus.hocs 可以很方便地增加各种状态和方法，为组件添加新的功能。同时，我们还了解了如何通过组合的方式将多个 HOC 连接起来，更好的利用 HOC 的特性。
作为前端开发者，我们需要掌握各种技术并且灵活运用。jedifocus.hocs 可以让我们更快地开发 React 应用，提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572f781e8991b448e91f3