如果将组件分为两类，您会发现组件更易于重用和推理。我称它们为 Container 和 Presentational 组件。

我假设您了解 redux 架构

容器组件

• 了解 redux
• 订阅 redux 状态
• 调度到 redux 操作
• 由 react-redux 生成
• 专注于事情的运作方式

展示组件

• 不知道 redux
• 从 props 读取数据
• 在 props 上调用回调
• 开发者撰写
• 专注于事物的外观

对组件进行分类的好处

• 可重用性
• 关注点分离

有关更多详细信息，请阅读这篇文章

这是差异的汇总版本，以便于理解，即使其中一些与上述答案有关，

容器组件

• 关心事情的运作方式
• 负责通过属性向展示组件提供数据
• 还负责处理通过回调属性在呈现组件内部触发的状态更改。这些状态更改通常是通过调度操作来完成的。

例子 ：

class TodoApp extends Component {
 componentDidMount() {
 this.props.actions.getTodos();
 }
 render() {
 const { todos, actions } = this.props;
 return (
 <div>
 <Header addTodo={actions.addTodo} />
 <MainSection todos={todos} actions={actions} />
 </div>
 );
 }
}
function mapState(state) {
 return {
 todos: state.todos
 };
}
function mapDispatch(dispatch) {
 return {
 actions: bindActionCreators(TodoActions, dispatch)
 };
}
export default connect(mapState, mapDispatch)(TodoApp);

演示组件

• 关心事物的外观
• 使用props展示一切
• 根本不管理状态
• 不发出动作，但可以通过props进行回调

例子：

<MyComponent
 title=“No state, just props.”
 barLabels={["MD", "VA", "DE", "DC"]}
 barValues={[13.626332, 47.989636, 9.596008, 28.788024]}
/>

我是这样理解的：

演示组件

关心事物的外观

容器组件

涉及逻辑的组件

然而，经过进一步的研究，我意识到这种分离有时是不必要的，正如 Dan Abramov 在这里提到的：https : //medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

您可以将表示组件理解为您在 React UI 组件库中找到的东西。它们使 UI 组件看起来很漂亮。然后，只需根据需要在容器组件中组合呈现组件。

话虽如此，如果您使用的是组件库，那么您编码的大部分组件将是容器组件。当然你可以制作自己的 React UI 组件库。

由于在编程中没有什么硬性规则，react UI 组件库可能有一些与组件紧密耦合的逻辑（即它的行为方式，例如抽屉组件），并且仍然被视为呈现组件。