什么是redux中的表示组件或容器组件[重复]

Question

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

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

和

什么是 react 中的 smart and dump 组件？

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

Answer 1

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

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

Container 组件是连接到 redux 存储的东西。通常使用 react redux 中的 connect 连接到 store

什么是 redux 中的 smart and 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 是一个组件，它使用展示应用组件连接到redux store，因此是一个容器。另一方面，User 组件是一个愚蠢的组件以及一个展示组件，因为它只需要一些道具并基于它呈现视图