React Redux中组件和容器之间的区别


Answers:


167

Component是React API的一部分。组件是描述React UI的一部分的类或函数。

容器是React组件的非正式术语,该组件被connectRedux存储。容器会接收Redux状态更新和dispatch操作,它们通常不呈现DOM元素。他们将渲染委托给演示性子组件。

有关更多详细信息,请阅读Dan Abramov的presentational vs container组件


这是一个很好的解释。非常简短,我可以详细了解一下
Faris Rayhan,

如果您单击该链接,将会看到Dan Abromov已退出此模式。也就是说,我仍在考虑@ olivier-boisse关于测试的评论的含义。
tim.rohrer

8

负责获取数据和显示的组件称为智能组件或容器组件。数据可以来自redux,任何网络呼叫或第三方订阅。

哑/表示组件是负责根据收到的道具来表示视图的组件。

带有示例的好文章

https://www.cronj.com/blog/difference-container-component-react-js/


来自props的数据并不特定于容器。它对于所有组件都是通用的。
Michael Freidgeim

@MichaelFreidgeim同意。道具是所有人的道具。
Akash Bhandwalkar,

4

这些组件构成了视图的一部分,因此它应该呈现DOM元素,并将内容放置在屏幕上。

容器参与数据的详细说明,因此它应该与redux“对话”,因为它将需要修改状态。所以,你应该包括连接(反应-终极版)是什么使得连接和功能mapStateToPropsmapDispatchToProps

.
.
.
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);


2

它们都是组件。容器是有功能的,因此它们不会自己呈现任何html,因此您还具有表示性组件,可在其中编写实际的html。容器的目的是映射状态并将其分发给表示组件的prop。

进一步阅读:链接


1

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组件的容器。


1

React有两个主要组件,第一个是智能组件(容器),第二个是哑巴(表示组件)。容器与组件非常相似,唯一的区别是容器知道应用程序状态。如果网页的一部分仅用于显示数据(哑),则使其成为组件。如果您需要它聪明并且知道应用程序中的状态(每当数据更改),则将其设置为容器。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.