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

Question

我试图将头缠绕在高阶组件上，这些组件与redux容器组件相同。再加上，编写高阶组件（容器组件）的推荐方法是通过react.com.poment的类，或者不如Redux站点给出的类。

Answer 1

关于该主题的文章太多了，所以我只是尝试简要解释该概念以及与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} />);
}

我建议阅读此内容以深入了解。

---

现在，这个概念与redux不耦合，而是redux do 使用它。
connect()实际上是在包装组件和商店之间进行接线的事件（注射道具并负责重新渲染）。它需要您的呈现组件并返回连接的组件。
容器（"连接"）组件实际上是增强的组件。

因此，要清楚地表明：Post是一个组件，我们使用HOC connect()创建增强的组件PostContainer。