展示组件(Presentational component):
- 主要关注UI的呈现和展示,负责渲染和显示数据。
- 通常是无状态的(stateless),接收来自容器组件的
props,并根据props渲染UI。 - 不关心数据的来源和逻辑处理,只负责展示和交互。
- 通常是可复用的,可以在多个地方使用。
容器组件(Container component):
- 主要关注数据的获取和逻辑处理,负责管理数据和状态。
- 通常是有状态的(stateful),可以包含自己的
state,并通过props将数据传递给展示组件。 - 可以通过Redux或其他状态管理库来管理应用程序的状态。
- 可以包含多个展示组件,负责协调它们之间的交互和数据流动。
简而言之,展示组件负责UI的呈现,而容器组件负责数据管理和逻辑处理。
这种分离使得组件更加模块化,易于维护和复用。