HOC（高阶组件）模式在React开发人员中非常流行。 但是Vue开发人员以某种方式绕过了它。 很徒劳。 让我们尝试找出答案。
什么是HOC？
高阶组件（HOC）是一个函数，它接受一个现有组件并返回另一个包裹原始组件并添加新逻辑的组件。
HOC与Mixins
也许许多人会想知道当有杂质时为什么要使用HOC？ 它们还为组件添加了新功能。 HOC哪些杂质不知道？
首先，回想一下Vue中存在什么杂质（取自Vue文档的定义）：
Mixins是Vue组件中的一种灵活的代码重用工具。 杂质对象可以包含任何组件选项。 当组件使用杂质时，所有杂质选项都将与组件自己的选项“混合”。
似乎杂质和HOC的目的是相同的-它们使您可以扩展不同组件的功能。 在外部（使用最终组件），它甚至可以看起来相同。
但是区别在于HOC和杂质的原理。 声明组件时会“混入”杂质-任何组件实例都将包含它们。
使用HOC，我们包装了一个组件实例，而不更改组件本身，而是在需要的地方创建一个新实例。 这意味着我们只影响使用代码的地方。 因此，我们减少了代码的一致性，使其更具可读性和灵活性。
HOC有点像装饰器设计模式。
HOC创作
那好 让我们看一个例子。
因此，我们有一个按钮组件：
一段时间后，我们突然需要记录一些按钮（但不是全部）的按下情况。 通过混合用于登录按钮组件的代码，然后在正确的位置启用或禁用通过某些组件属性的日志记录，我们可以解决杂质问题。 但是同意，这不是很方便吗？ 如果有很多这样的功能？ 一个错误-所有按钮可能无法正常工作。
在这种情况下，HOC将是一个很好的解决方案。 我们只是将按钮包装在具有相应HOC的某些位置。
是时候在实践中了解HOC了。
步骤1.创建一个HOC函数
我们记得，HOC是将一个组件作为输入并返回另一个组件的函数。 因此，让我们创建一个这样的功能。 我们用LoggerButton来称呼它。
通常习惯于以HOC功能命名-这是HOC的一种识别标记。
结果是一个将Button组件作为输入，然后返回新组件的函数。 在render函数中，我们使用原始组件，但有一个更改-添加事件以单击DOM节点，在控制台中单击题词的输出。
如果您不了解这里发生了什么，h和上下文是什么，那么请先阅读有关渲染功能如何工作的vue文档。
在当前示例中，我使用了功能组件，因为 我不需要条件。 没有人禁止您返回常规组件而不是功能组件，但不要忘记功能组件比普通组件快得多。
步骤2.使用HOC
现在，使用结果函数，我们只需创建一个新组件。
剩下的唯一事情就是在需要单击日志记录的地方连接接收到的组件。
最后的例子：
组成
这一切当然很棒，但是如果您需要一个不仅可以登录又可以执行其他操作的按钮，该怎么办？
一切都很简单。 我们正在将一种HOC转变为另一种。 我们可以根据需要混合任意数量的HOC。
同样对于合成，有很多现成的功能和库可以促进合成。
HOC是一种简单但功能强大的模式。 它在许多库的基础上使用。 它不是灵丹妙药，也不是Mixins和组件继承机制的完整替代品。 明智地将其与其他模式结合使用，您的Vue应用程序将变得真正灵活。
交叉岗位