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

Question

我刚刚查看了 React 中的 HOC。他们很酷。但是，简单地包装一个组件不就可以达到同样的效果吗？

高阶分量

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

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

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

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

}

组件包装

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

class ParentComponent extends React.Component {

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

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

}

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

HOC 和通过 this.props.children 组合组件之间的真正区别在哪里？是否有只能使用一个或另一个的示例？使用 HOC 是更好的做法。这些只是您可以选择自己喜欢的口味的选择吗？

Answer 1

Higher-Order 组件（HOC）和容器组件是不同的。他们有不同的用例并解决类似但不同的问题。

HOC 就像 mixins。它们用于组合装饰组件所知道的功能。这与包装 children 并允许 children 愚蠢（或不意识到容器的装饰功能）的容器组件相反。

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

因此，如果您想从 this.props.children 向 child 添加新道具，则必须使用 cloneElement。这效率不高，因为这意味着您必须 re-create 元素。

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

之外

Answer 2

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

如果您有 4 个要渲染的元素可以定义 HOC，您希望在 render 中创建高阶组件，但是由于在渲染中调用高阶组件会导致 <HigherOrderComponent/> 重新安装在每个渲染器上，这将成为一个非常糟糕的主意。

This is documented here; https://github.com/facebook/react/blob/044015760883d03f060301a15beef17909abbf71/docs/docs/higher-order-components.md#dont-use-hocs-inside-the-render-method.

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

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

Difference between using a HOC vs. Component Wrapping

higher-order-functions

reactjs

react-router

react-redux

高阶分量

组件包装