zor*_*404 7 reactjs higher-order-components
component composition官方 react.js 上的教程描述了如何使用组合来避免继承，并且在大多数情况下我看到了这里的优势。
但是网站也提到了we haven’t found any use cases where we would recommend creating component inheritance hierarchies
src：https : //reactjs.org/docs/composition-vs-inheritance.html
但是我们有一个关于 HOC（高阶组件）模式
src的教程：https : //reactjs.org/docs/higher-order-components.html
它建议编写用于生成复合组件的函数，以避免重复逻辑。
此模式也用于 Relay 中，用于与 GraphQL 配合使用的组件。
对于来自 C#/Java/PHP 背景的人来说，他们的 HOC 用例看起来像是何时使用继承的明显例子。这是我之前在 React 中自己做的，发现它非常直观，更重要的是易于调试。
我也在努力理解 HOC 中使用的生成器函数相对于常规复合组件的优势，后者通过 props 获取内部组件。
所以我的问题是：React 中的 HOC 是否存在无法通过组合或继承轻松解决的用例？
示例将不胜感激。
更新：发现这篇文章Inheritance Inversion建议让您的包装类从您的内部类继承并调用它的 render() 方法。
我可能有偏见，所以我不会立即放弃这个想法，因为它可能有实际用途，但我必须首先对其进行更多研究。
如果您知道这何时可以击败常规组合或继承，请发表评论，或者如果您认为自己有一个很好的案例，请留下一个答案。
小智 4
对于那些来自Java等面向对象语言的人来说，重要的是要考虑到Javascript是一种基于原型的语言，这意味着对象属性和方法可以通过具有克隆和扩展能力的通用对象来共享。这称为原型继承，不同于，与类继承不同。在 Javascript 中，太多的继承会导致无尽的混乱，当你尝试调试此类代码时会带来无尽的痛苦，并且还会影响性能，这就是为什么如果你阅读 Facebook\xe2\x80\x99s 文章
\n\n\n\n在 Facebook，我们在数千个组件中使用 React，并且\xe2\x80\x99 没有发现任何我们建议创建\n组件继承层次结构的用例
\n
话虽如此，我们不应该混淆HOC和Composition两种不同模式的概念。他们有不同的用例。
\n高阶组件 (HOC )React 中用于重用组件逻辑的高级技术。通过阅读以下示例：
\n\n它看起来像是一种模式，就像何时使用继承的明显示例一样，但事实并非如此。HOC 涉及的逻辑不仅如此。
\n一些例子
\n\n\nReact 中是否有 HOC 的用例无法通过组合或继承轻松解决？
\n
我想说的是，要始终避免继承，并根据您的需要选择组合或HOC，并考虑到如果您选择组合，您至少必须尝试遵循以下常见规则，例如：
\n一个例子：
\nclass Composed extends React.Component {\n state = { \n value: \'foo\'\n }\n changeValue = value => this.setState({value})\n render() {\n <div>\n <Component1 value={this.state.value} changeValue={this.changeValue} />\n <Component2 value={this.state.value} />\n <div>\n }\n}希望能有所帮助。
\n| 归档时间： |
|
| 查看次数： |
2499 次 |
| 最近记录： |