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

【问题标题】：Redux higher order components same as container componentsRedux 高阶组件与容器组件相同
【发布时间】：2017-02-17 21:30:38
【问题描述】：

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

【问题讨论】：

标签： redux higher-order-components

【解决方案1】：

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

现在，这个概念并没有与 Redux 耦合，但 Redux 确实使用它。
connect() 实际上是一个 HOC，它在被包装的组件和 store 之间进行连接（注入 props并负责重新渲染）。它获取您的演示组件并返回一个连接的组件。
容器（“连接”）组件实际上是增强组件。

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

【讨论】：

为了澄清，似乎隐含的答案是，虽然 Redux 鼓励本身就是 HOC 的容器，但如果有意义的话，它不应该阻止您在 Redux 容器之上编写 HOC - 是正确的？（这也是我很好奇的事情）
@aug 我认为说容器是 HOC 的输出会更正确。你绝对可以使用多个 HOC 来增强一个组件，无论它是不是容器。