react redux中组件和容器的区别

Posted 2023-02-22

技术标签:

【中文标题】react redux中组件和容器的区别【英文标题】：Difference between component and container in react redux 【发布时间】：2017-09-10 20:58:23 【问题描述】：

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

【问题讨论】：

容器知道存储并将状态道具传输给组件。组件的唯一目标是渲染 html，理想情况下组件是无状态的，那么编写单元测试会更容易 【参考方案1】：

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

Container 是 React 组件的非正式术语，它被 connect-ed 到 redux 存储。容器接收 Redux 状态更新和dispatch 动作，它们通常不渲染 DOM 元素；他们将渲染委托给 presentational 子组件。

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

【讨论】：

如果您点击链接，您会发现 Dan Abromov 已经放弃了这种模式。也就是说，我仍在考虑@olivier-boisse 关于测试的评论的含义。【参考方案2】：

它们都是组件；容器是功能性的，因此它们不会自行呈现任何 html，然后您还拥有展示组件，您可以在其中编写实际的 html。容器的目的是映射状态并分派到表示组件的道具。

延伸阅读：Link

【讨论】：

【参考方案3】：

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

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

这里有例子的好文章

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

【讨论】：

来自 props 的数据并非特定于容器。它对所有组件都是通用的。 @MichaelFreidgeim 同意。道具是所有人的道具。【参考方案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);

【讨论】：

【参考方案5】：

React、Redux 是独立的库。

React 为您提供了一个用于创建 HTML 文档的框架。组件以某种方式表示文档的特定部分。然后，与组件相关联的方法可以操作文档中非常特殊的部分。

Redux 是一个框架，它规定了在 JS 环境中存储和管理数据的特定理念。它是一个定义了某些方法的大型 JS 对象，最佳用例以 Web 应用的状态管理形式出现。

由于 React 规定所有数据都应该从根向下流向叶子，因此将所有 props 主化，在组件中定义 props，然后将 props 传递给某些 props 给子项，变得乏味。它还使整个应用程序状态易受攻击。

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 函数传递一个 prop type。

这样，连接就充当了 Person 组件的容器。

【讨论】：

【参考方案6】：

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

【讨论】：

【参考方案7】：

组件

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

容器

容器就像没有 UI 的组件一样，容器关心的是事情是如何工作的。。它主要与 redux store 对话以获取和更新数据

查看 Redux 文档中的表格比较