Question

react redux中组件和容器之间有什么区别？

Answer 1

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

容器是React组件的非正式术语，connect - 指向redux商店。容器接收Redux状态更新和dispatch操作，它们通常不呈现DOM元素;他们将渲染委托给演示子组件。

有关详细信息，请阅读Dan Abramov撰写的presentational vs container components。

Answer 2

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

哑巴/演示组件是负责根据收到的道具呈现视图的组件。

这里有一个很好的文章

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

Answer 3

组件构成视图的一个部分，因此它应该呈现DOM元素，将内容放在屏幕上。

容器参与数据详细说明，因此它应该＆＃34; talk＆＃34;用redux，因为它需要修改状态。因此，您应该包括连接（react-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);

Answer 4

它们都是组成部分;容器是可用的，所以它们不会自己呈现任何html，然后你也有表示组件，你可以在其中编写实际的html。容器的目的是将状态和调度映射到表示组件的props。

进一步阅读：Link

Answer 5

React，Redux是独立的库。

React为您提供了创建HTML文档的框架。组件以某种方式表示文档的特定部分。然后，与组件关联的方法可以操纵文档的特定部分。

Redux是一个框架，它规定了用于在JS环境中存储和管理数据的特定文本。它是一个定义了某些方法的大型JS对象，最佳用例来自Web应用程序的状态管理。

由于React规定所有数据应该从根向下流动，所以主要所有道具，在组件中定义道具然后将道具传递给儿童的某些道具变得乏味。它还使整个应用程序状态易受攻击。

React Redux提供了一个干净的解决方案，它可以直接将您连接到Redux商店，只需将连接的组件包裹在另一个React组件（您的Container）周围。因为在您的实现中，您已经定义了您需要的整个应用程序状态的哪一部分。所以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。

这样，connect就作为Person组件的容器。

Answer 6

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

Answer 7

组件

组件使您可以将UI分成独立的，可重用的部分，并单独考虑每个部分。它们有时被称为“呈现组件”，主要关注的是外观如何

容器

容器就像没有UI的组件一样，容器也关心工作方式。。它主要与redux存储进行对话以获取和更新数据

请参阅Redux文档中的表比较

详细说明https://redux.js.org/basics/usage-with-react#presentational-and-container-components

反应还原中组分和容器之间的差异

7 个答案: