react redux中的component和container有什么区别?
react redux中的component和container有什么区别?
Answers:
Component
是React API的一部分。组件是描述React UI的一部分的类或函数。
容器是React组件的非正式术语,该组件被connect
Redux存储。容器会接收Redux状态更新和dispatch
操作,它们通常不呈现DOM元素。他们将渲染委托给演示性子组件。
有关更多详细信息,请阅读Dan Abramov的presentational vs container组件。
负责获取数据和显示的组件称为智能组件或容器组件。数据可以来自redux,任何网络呼叫或第三方订阅。
哑/表示组件是负责根据收到的道具来表示视图的组件。
带有示例的好文章
https://www.cronj.com/blog/difference-container-component-react-js/
这些组件构成了视图的一部分,因此它应该呈现DOM元素,并将内容放置在屏幕上。
容器参与数据的详细说明,因此它应该与redux“对话”,因为它将需要修改状态。所以,你应该包括连接(反应-终极版)是什么使得连接和功能mapStateToProps和mapDispatchToProps:
.
.
.
import { connect } from "react-redux";
class myContainer extends Component {
}
function mapStateToProps(state) {
// You return what it will show up as props of myContainer
return {
property: this.state.property
};
}
function mapDispatchToProps(dispatch) {
// Whenever property is called, it should be passed to all reducers
return bindActionCreators({ property: property }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(myContainer);
组件
组件使您可以将UI分成独立的,可重用的部分,并单独考虑每个部分。它们有时被称为“表达组件”,主要关注的是事物的外观
货柜
容器就像没有UI的组件一样,容器关注事物的工作方式。。它主要与redux存储进行对话以获取和更新数据
请参阅Redux文档中的表比较
详细说明https://redux.js.org/basics/usage-with-react#presentational-and-container-components
React,Redux是独立的库。
React为您提供了创建HTML文档的框架。组件以某种方式表示文档的特定部分。然后,与组件关联的方法可以操纵文档的非常特殊的部分。
Redux是一个框架,规定了在JS环境中存储和管理数据的特定哲学。它是一个定义了某些方法的大JS对象,最佳用例是Web应用程序的状态管理。
由于React规定所有数据都应从根流到树叶,因此以所有道具为主体,在组件中定义道具,然后将道具传递给某些道具给孩子,变得很繁琐。这也使整个应用程序状态易受攻击。
React Redux提供了一个干净的解决方案,只需将连接的组件包装在另一个React Component(your Container
)上,即可直接将您连接到Redux商店。由于在实现中,您的实现已经定义了所需的整个应用程序状态中的哪一部分。因此,connect
将这些数据带出存储区,并将其作为道具传递给包装自身的组件。
考虑以下简单示例:
class Person extends Component {
constructor(props){
this.name = this.props.name;
this.type = this.props.type;
}
render() {
return <p> My name is {this.name}. I am a doctor { this.type } </p>
}
}
const connect = InnerComponent => {
class A extends Component{
render() {
return <InnerComponent {...this.props} type="Doctor"/>
}
}
A.displayName = `Connect(${InnerComponent.displayName})`
return A
}
connect
功能传递一个道具type
。
这样,连接就可以充当Person组件的容器。