Redux高阶组件与容器组件相同

我试图围绕高阶组件包装我的头，这些与Redux容器组件相同。另外推荐的方式是通过扩展React.Component的类或者在redux站点中没有的类来编写更高阶的组件（容器组件）。Redux高阶组件与容器组件相同

2017-02-17 tmp dev

关于这个问题写了so much，所以我只想简单地解释一下这个概念以及它如何与Redux相关。

您可以将HOC视为增强器（或“装饰器”）。它需要一个现有的组件并返回一个新的，改进的组件。常见的任务是：注入道具，组成，改变它呈现的方式等。

它通常作为一个函数实现：获取一个组件，产生另一个组件。模式可能会有所不同，取决于您的目标和需求。

你可以扩展包组件：

function hoc(WrappedComponent) { 
    return class HOC extends WrappedComponent { 
     render() { 
      return super.render(); 
     } 
    } 
}

或撰写的包裹组件：

function hoc(WrappedComponent) { 
    return class HOC extends React.Component { 
     render() { 
      return (<WrappedComponent {...this.props} extraProp={1} />) 
     } 
    } 
}

，如果你想使事情变得简单，不需要完整的生命周期，您也可以使用无状态组件：

function hoc(WrappedComponent) { 
    return (props) => (<WrappedComponent {...props} extraProp={1} />); 
}

我建议您阅读this以获得更深入的了解。现在

，这个概念是不是加上终极版，但终极版不使用它。
connect()实际上是一个HOC，在包装组件和商店之间进行连线（注入道具并负责重新渲染）。它需要您的表示组件并返回一个连接组件。
容器（“连接”）组件实际上是增强组件。

所以要说清楚：Post是一个组件，我们使用HOC connect()来创建增强组件PostContainer。

来源

2017-02-18 09:16:50

为了澄清它似乎暗示的答案是，虽然Redux鼓励容器本身是HOC的，但它不应该阻止你在Redux容器上写一个HOC，如果它有意义的话 - 是正确的吗？（这也是我很好奇的） – aug

@aug我认为容器是HOC的*输出*会更准确。您绝对可以使用多个HOC来增强组件，无论它是否为容器。 –

Redux高阶组件与容器组件相同

回答

相关问题