时间戳

首页 > 解决方案 > 什么是 redux 中的展示组件或容器组件

reactjs - 什么是 redux 中的展示组件或容器组件

问题描述

我是redux的新手。即使在stackoverflow上，我也尝试过搜索谷歌的上述问题。但找不到适合我的答案。我想知道

redux 中的表示和容器组件是什么？

和

什么是反应中的智能和转储组件？

用合适的例子，这将有助于我理解上面，谢谢。

标签： reactjsredux

解决方案

redux 中的表示和容器组件是什么？

表示组件是负责在视图上呈现某些内容的组件。

Container 组件是连接到 redux 存储的东西。通常connect来自 react redux 用于连接到商店

redux 中的 smart 和 dump 组件是什么？

智能组件是其中包含一些逻辑的东西，用于呈现视图或处理数据，例如获取数据、维护状态、处理用户交互

Dumb 组件通常是一个 ccomponent，它只接收 props 并呈现视图，而不实际处理任何用户交互本身

例如

class App extends React.Component {
   state =  { 
      count: 0
   }
   render() {
      return (
         <div>
             <User data={this.props.user} />
             <div>{this.state.count}</div>
             <button onClick={() => this.setState(prevState => ({count: prevState.count + 1}))}>Increment</button>
         </div>
      )
   }
}

const User = ({ data }) => (
   <div>
      <div>{data.id}</div>
      <div>{data.name}</div>
      <div>{data.surname}</div>
   </div>
)
const mapStateToProps = (state) => {
   return {
      user: state.user
   }
}
const ContainerApp =  connect(mapStateToProps)(App)

在上面的示例App中，它本身就是一个演示组件和一个智能组件，因为它处理用户交互的递增和显示计数。然而ContainerApp，它是一个使用展示 App 组件连接到 redux 商店的组件，因此是一个容器。User另一方面，组件是一个愚蠢的组件以及一个展示组件，因为它只需要一些道具并基于它呈现视图

推荐阅读