Reactjs 使用HOC与组件包装之间的区别

我刚查到HOC在React。他们很酷。然而，简单地包装一个组件不是也能达到同样的效果吗

高阶分量 这个简单的HOC将状态作为属性传递给ComposedComponent

const HOC = ComposedComponent => class extends React.Component {

    ... lifecycle, state, etc;...

    render() {
      return (<ComposedComponent {...this.state} />);
    }      

}

const HOC=ComposedComponent=>类扩展React.Component{
…生命周期、状态等；。。。
render（）{
返回（）；
}      
}

组件包装 此组件将状态作为属性传递给子组件

class ParentComponent extends React.Component {

    ... lifecycle, state, etc;...

    render() {
      return (
        <div>
          {React.cloneElement(this.props.children, { ...this.state })}  
        </div>
      );
    }      

}

类ParentComponent扩展了React.Component{ …生命周期、状态等；。。。 render（）{ 返回( {React.cloneElement（this.props.children，{…this.state}} ); } } 虽然两者的用法略有不同，但它们似乎都是可重用的

HOC和通过this.props.children组合组件的真正区别在哪里？有没有只可以使用其中一个的例子？使用HOC是一种更好的做法。这些仅仅是您可以选择自己喜欢的口味的选择吗？

高阶组件（HOC）和容器组件是不同的。它们有不同的用例，解决相似但不同的问题

它们就像混合物。它们用于组合装饰组件知道的功能。这与容器组件相反，容器组件包装子对象并允许子对象是哑的（或不知道容器的修饰功能）

在转移道具时，容器确实可以为其子容器添加功能。但是，这通常是以道具的形式传给孩子们。在容器中，这也很尴尬，因为您不能简单地向已创建的元素添加道具：

因此，如果您想从

this.props.children

向子级添加新道具，则必须使用

cloneElement

。这不是很有效，因为这意味着您必须重新创建元素

---

此外，HOC只是创建组件的一种方式（工厂）。因此，这可能发生在

渲染之外

我只想补充一点，当需要动态高阶组件时，容器方法工作得更好

例如，如果您有4个元素要渲染，并且可以定义一个HOC，那么您希望在

渲染

中创建高阶组件，但是由于在渲染中调用高阶组件会导致

在每个渲染中重新装载，这就成了一个非常糟糕的主意

这在这里有记录

---

但总的来说，我会选择HOC方法。

你能解释一下为什么“这也很尴尬，因为你不能简单地将道具添加到已经创建的元素中”？我认为Davin的意思是HOC是用组件实例调用的，HOC可以在组件呈现之前向组件实例中注入道具。容器组件是通过呈现组件实例而不是组件实例本身的结果来调用的。因此在同一个项目中看到这两种技术并不少见？包含其“哑”子组件逻辑的容器，以及实现HOCs以添加类似但非特定于域的功能的任何组件？这是一个很好的答案，我认为“装饰组件知道”应该强调这一部分，因为这对我区分两者至关重要。当你说装饰组件知道HOC的功能时，你是什么意思？我很难理解这一点，“组件包装”与“容器组件”相同吗？