1

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

4

1 回答 1

4

关于这个主题的文章太多了，所以我将尝试简要解释一下这个概念以及它与 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确实使用了它。
connect()实际上是一个 HOC，负责在被包装的组件和 store 之间进行连接（注入 props 并负责重新渲染）。它获取您的演示组件并返回一个连接的组件。
容器（“连接”）组件实际上是增强组件。

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

于 2017-02-18T09:16:50.530 回答