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

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,但由于在渲染中调用高阶组件会导致<HigherOrderComponent/>在每个渲染上重新安装,这就变成了一个非常糟糕的想法.

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

但总的来说,我会采用HOC方法.