React中高阶组件的用例？

Question

官方react.js上关于component composition的教程描述了如何使用组合来避免继承，并且在大多数情况下我看到了这里的优势。
但该网站还提到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
这建议编写用于生成复合组件的函数，作为避免重复逻辑的手段 此模式也用于继电器，用于与GraphQL一起使用的组件。

对于来自C＃/ Java / PHP背景的人来说，他们的HOC用例看起来就像何时使用继承的明显例子。这是我之前在React中做过的事情，发现它非常直观，更重要的是易于调试。

我也在努力理解HOC中使用的生成器函数优于常规复合组件的优势，这些组件通过道具获取内部组件。

所以我的问题是：在React中是否存在HOC的用例，而不是通过组合或继承来解决这个问题？

示例将不胜感激。

更新：发现这篇关于Inheritance Inversion的文章，建议让你的包装类继承你的内部类并调用它的render（）方法。
我可能有偏见，所以我不会马上放弃这个想法，因为它可能有实际用途，但我必须首先考虑它。
如果您知道何时可以胜过常规作文或继承，请留下评论，或者如果您认为自己有好的话，可以给出答案。

Answer 1

对于那些来自任何面向对象语言的人，例如 Java ，重要的是要考虑 Javascript 是原型基于的语言意味着可以通过能够克隆和扩展的通用对象共享对象属性和方法。这称为原型继承，与类继承不同。在Javascript中，过多的继承会导致无休止的混乱，当你尝试调试这些代码并影响性能时会产生无穷无尽的痛苦，这就是为什么如果你阅读Facebook的文章

• https://reactjs.org/docs/composition-vs-inheritance.html在最底部你会看到：

  

在Facebook，我们在数千个组件中使用React，我们还没有找到任何建议创建的用例   组件继承层次结构

说这个，我们不应该混合两种不同模式的概念，如 HOC 和组合。他们有不同的用例。

高阶组件（HOC）是React中用于重用组件逻辑的高级技术。通过阅读以下示例：

• https://reactjs.org/docs/higher-order-components.html

它似乎是一种模式，就像何时使用继承的明显例子一样，但事实并非如此。参与HOC的逻辑不仅仅是那个。

一些例子

• React-Redux使用名为 connect 的HOC将商店状态映射到道具
• React-Router的 withRouter HOC为需要访问历史记录API的组件提供路由上下文

  

在React中是否存在HOC的用例，这种用例并不容易   通过组合或继承来解决？

我会说要始终避免继承，并根据您的需要选择撰写或 HOC ，并考虑到如果您选择撰写< / strong>您至少要尝试遵循以下公共规则：

• 将组件划分为有状态的“组合”和无状态“组件”。
• 如果两个组件需要访问相同的状态，请将状态移动到其公共父级。 https://reactjs.org/docs/lifting-state-up.html

一个例子：

class Composed extends React.Component {
      state = { 
         value: 'foo'
      }
      changeValue = value => this.setState({value})
      render() {
            <div>
              <Component1 value={this.state.value} changeValue={this.changeValue} />
              <Component2 value={this.state.value} />
            <div>
      }
}

希望有所帮助。