Question

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

Answer 1

有so much关于这个主题的文章，所以我只想简单解释一下这个概念及其与Redux的关系。

您可以将HOC视为增强器（或＃34;装饰器＆＃34;）。它需要一个现有的组件并返回一个新的，改进的组件。常见的任务是：注入道具，编写，改变渲染方式等。

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

您可以扩展包装组件：

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以获得更深入的了解。

现在，这个概念没有与Redux结合，但是Redux 确实使用它 connect()实际上是一个HOC，它在包装组件和商店之间进行连接（注入props并负责重新呈现）。它需要您的表示组件并返回连接组件 Container（＆＃34; connected＆＃34;）组件实际上是增强组件。

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

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

1 个答案: