我刚刚在React中查看了HOC。他们很酷。但是，不是简单地包装组件就能达到相同的效果吗？
高阶组件
这个简单的HOC将状态作为属性传递给ComposedComponent
const HOC = ComposedComponent => class extends React.Component {
... lifecycle,state,etc;...
render() {
return (<ComposedComponent {...this.state} />);
}
}
组件包装
此组件将state作为属性传递给子组件
class ParentComponent extends React.Component {
... lifecycle,etc;...
render() {
return (
<div>
{React.cloneElement(this.props.children,{ ...this.state })}
</div>
);
}
}
尽管两者之间的使用略有不同，但它们似乎都可以重复使用。
通过this.props.children，HOC和组成组件之间的真正区别在哪里？是否有例子只能使用其中一个？使用HOC是一种更好的做法。这些只是您选择自己喜欢的味道的选择吗？
高阶组件(HOC)和容器组件是不同的。他们有不同的用例并解决类似但不同的问题。
HOC就像mixins。它们用于组成装饰组件知道的功能。这与包装子项并允许子项愚蠢(或不知道Container的装饰功能)的容器组件相对。
转移道具时，容器可以为子项添加功能。但是，这通常是以道具的形式传递给孩子们的。在容器中，这也很尴尬，因为您不能简单地将道具添加到已创建的元素中：
因此，如果您想从this.props.children向子项添加新的prop，则必须使用cloneElement。这不是那么有效，因为这意味着您必须重新创建元素。
此外，HOC只是创建组件的一种方式(工厂)。所以，这可以在渲染之外发生。
