Question

我是redux的新手。我在搜索Google甚至在stackoverflow上尝试了上述问题。但是找不到适合我的答案。我想知道

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

和

什么是聪明的，转储组件会做出反应？

带有合适的示例，这将帮助我理解上面的内容，谢谢。

Answer 1

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

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

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

redux中的智能转储组件是什么？

智能组件是一种内部具有某种逻辑的东西，用于呈现视图或处理数据，例如获取数据，维护状态，处理用户交互

Dumb组件通常是一个仅包含道具并渲染视图而无需实际处理用户交互本身的ccomponent

例如

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组件是一个哑巴组件，只是一个演示组件，因为它只需要一些道具并基于它呈现视图。

在redux中什么是表示组件或容器组件

1 个答案: