我试图围绕高阶组件包装我的头,这些与Redux容器组件相同。另外推荐的方式是通过扩展React.Component的类或者在redux站点中没有的类来编写更高阶的组件(容器组件)。Redux高阶组件与容器组件相同
1
A
回答
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以获得更深入的了解。现在
,这个概念是不是加上终极版,但终极版不使用它。
connect()
实际上是一个HOC,在包装组件和商店之间进行连线(注入道具并负责重新渲染)。它需要您的表示组件并返回一个连接组件。
容器(“连接”)组件实际上是增强组件。
所以要说清楚:Post
是一个组件,我们使用HOC connect()
来创建增强组件PostContainer
。
相关问题
- 1. 在Redux容器中使用更高阶的组件
- 2. Redux演示组件VS容器组件
- 3. Redux:单容器,多组件
- 4. React Redux容器组件
- 5. React高阶组件
- 6. React高阶组件Vs父组件
- 7. 阵营与同一容器/ Redux的多个组件
- 8. 组合Redux减速器与同一组件的不同实例
- 9. Redux - 相同的减速器,容器和组件产生不同的结果
- 10. 了解React高阶组件
- 11. 装饰进口阵营组件与高阶组件
- 12. 混淆react-redux和容器/组件
- 13. SAP PI组件与不同阶段/ ENV
- 14. Redux,针对不同初始状态的高阶降阶器?
- 15. 阵营高阶组件初始道具
- 16. React JS - TransitionGroup和高阶组件
- 17. 将ES5 Mixins转换为高阶组件
- 18. 高阶组件:React.createElement:类型无效
- 19. Typescript:高阶组件的类型定义
- 20. 如何从组件到容器中的事件React Redux
- 21. 验证React-Redux中“容器组件”中的触发事件
- 22. Redux。从容器组件描述表示组件的生命周期方法
- 23. 在Redux中编写高阶缩减器
- 24. Redux:当子组件调度Redux动作时通知父组件React组件
- 25. React-Redux中的相同组件的多个实例
- 26. 组件中的混合状态与redux
- 27. 将React videojs组件的状态与Redux相结合
- 28. C#组件容器
- 29. EXTJS动态把一个组件与其它组件的容器
- 30. React-Redux:组件或容器中的表单?
为了澄清它似乎暗示的答案是,虽然Redux鼓励容器本身是HOC的,但它不应该阻止你在Redux容器上写一个HOC,如果它有意义的话 - 是正确的吗? (这也是我很好奇的) – aug
@aug我认为容器是HOC的*输出*会更准确。您绝对可以使用多个HOC来增强组件,无论它是否为容器。 –