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

Question

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

高阶组件

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

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

高阶组件(HOC)和容器组件是不同的。它们有不同的用例并解决类似但不同的问题。

HOC 就像 mixin。它们用于组合被装饰组件知道的功能。这与包装子组件并允许子组件变得愚蠢(或不意识到容器的装饰功能)的容器组件相反。

确实，在传输 props 时，容器可以为其子级添加功能。但是，这通常以 Prop 的形式传递给 children 。在容器中，这也很尴尬，因为您不能简单地将 Prop 添加到已创建的元素中:

因此，如果您想从 this.props.children 向子级添加新的 prop，则必须使用 cloneElement。这效率不高，因为这意味着您必须重新创建元素。

此外，HOC 只是创建组件的一种方法(工厂)。因此，这可能发生在渲染之外。