React js - HPC 和装饰器有啥区别

Posted 2023-02-23

【中文标题】React js - HPC 和装饰器有啥区别

【英文标题】：React js - What is the difference betwen HOC and decoratorReact js - HPC 和装饰器有什么区别

【发布时间】：2018-07-19 02:27:00

【问题描述】：

有人能解释一下这两者有什么区别吗？ 我的意思是除了语法上的不同，这两种技术都是用来实现相同的东西（即复用组件逻辑）吗？

【问题讨论】：

这篇 Medium 文章不错：medium.com/google-developers/…

【参考方案1】：

出于所有实际原因，装饰器和 HOC（Higher-Order-Component aka Wrapper）做同样的事情。

一个主要的区别是，一旦你添加了一个装饰器，属性/类就只能以它被装饰的形式使用。 HOC 模式留下了可供使用的高阶和低阶组件。

进一步阅读装饰器 -> https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841 装饰器不是一个广泛实现的 JS 特性。它仍处于提案阶段。 Babel 7 默认允许装饰器作为其 stage 0 配置中的默认插件。 https://babeljs.io/docs/plugins/transform-decorators/

【参考方案2】：

我也很好奇为什么 React 社区将其称为 高阶组件 (HOC) 而不是 Decorator pattern，这似乎正是它正在做的事情，并且一直是 described in 1994 (!) by the Gang of Four (GoF): Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides。

另一个令人困惑的原因是ES7's decorator pattern 与 GoF 对装饰器模式的解释不同。不幸的是，情况确实如此。我希望与其重新定义现有术语，不如重用该术语，即使在限定它时也是如此。即使这不可能，发明一个不同的术语也会更容易接受。

【讨论】：

EcmaScript 中的装饰器不是一种模式，而是一种语言特性，就像变量、函数、类等都是语言特性一样。如果您了解模式和语言特征之间的区别，就不会有混淆。此外，该名称对模式和语言功能都有意义，因为在这两种情况下，装饰器都使用额外的功能来装饰现有代码，而无需直接修改该代码。

【参考方案3】：

两个不同之处是装饰器用于改变变量，而建议不要使用 HOC。另一个是 React 特有的，HOC 应该渲染一个组件，而装饰器可以根据实现返回不同的东西。

【讨论】：

你刚刚说了我要说的话。