Question

我刚刚在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, state, etc;...

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

}

尽管两者之间的使用略有不同，但它们似乎都可以重复使用。

通过this.props.children，HOC和组成组件之间的真正区别在哪里？是否有例子只能使用其中一个？使用HOC是一种更好的做法。这些只是您选择自己喜欢的风味的选择吗？

Answer 1

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

HOC就像mixins。它们用于组成装饰组件知道的功能。这与包装子项并允许子项愚蠢（或不知道Container的装饰功能）的容器组件相对。

传输道具时，容器可以为子项添加功能。但是，这通常是以道具的形式传递给孩子们的。在容器中，由于您不能简单地将道具添加到已创建的元素的限制，这也很尴尬：

因此，如果您想为this.props.children的儿童添加新道具，则必须使用cloneElement。这不是那么有效，因为这意味着你必须重新创建元素。

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

Answer 2

我只是想补充一点，当您需要动态高阶组件时，Container方法会更好。

如果你有4个要渲染的元素可以定义HOC，你想在render内创建高阶组件，但是因为在render中调用高阶组件会导致<HigherOrderComponent/>＆＃39; s要重新安装每个渲染，这将成为一个非常糟糕的想法。

这里有记录; https://github.com/facebook/react/blob/044015760883d03f060301a15beef17909abbf71/docs/docs/higher-order-components.md#dont-use-hocs-inside-the-render-method

但总的来说，我会采用HOC方法。

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

高阶组件

组件包装

2 个答案: