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

Question

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

Answer 1

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

Container是React组件的非正式术语,它是connect-dedx存储的.容器接收Redux状态更新和dispatch操作,它们通常不呈现DOM元素; 他们将渲染委托给表现性的子组件.

有关详细信息,请阅读Dan Abramov撰写的演示文稿与容器组件.

Answer 2

成分

组件让您可以将 UI 拆分为独立的、可重用的部分，并单独考虑每个部分。它们有时被称为“展示组件”，主要关注的是事物的外观

容器

容器就像没有 UI 的组件一样，容器关注事物的工作方式。. 它主要与 redux store 对话以获取和更新数据

请参阅 Redux 文档中的表格比较

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

Answer 3

负责获取数据并显示数据的组件称为智能或容器组件.数据可以来自redux,props或任何网络调用.

哑/表示组件是负责呈现接收数据的组件.

这里有一个很好的文章

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

Answer 4

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

容器参与数据阐述，因此它应该与 redux“对话”，因为它需要修改状态。因此，您应该包括connect (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 5

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