“Smart Container” 和 “Dumb Component” 是一种 React 组件设计模式的概念，有时也被称为 “Container vs Presentational Components”。这种设计模式有助于组件的组织和重用。
Smart Container
Smart Container 通常负责应用逻辑和状态管理。这些组件知道应用的工作原理和各种状态如何改变。它们可以连接到数据源（如 Redux Store 或外部 API），并通过 props 向子组件传递数据和回调函数。
Smart Container 的主要职责包括：
- 状态管理
- 数据获取（如 API 调用）
- 逻辑处理
- 路由处理
Dumb Component
与之相对，Dumb Component（或 Presentational Component）只关心如何展示数据。它们不知道数据来自何处或应用的工作原理，只负责接收 props 并渲染 UI。
Dumb Component 的主要特点：
- 不依赖应用的其他部分
- 不关心数据如何加载或变化
- 只通过 props 接收数据和回调
- 通常只是纯函数，没有自己的状态（除了 UI 状态）
为什么这是个好主意？
这种模式的优点是提高了组件的可维护性和可重用性。你可以独立地更新 Smart Container 和 Dumb Component，只要它们遵循相同的 props 协议。这也使得 Dumb Component 更易于测试，因为你可以通过简单地传入 props 来检查它们的行为。
例如，在一个简历生成器应用中，你可能有一个 “ResumeEditor” 的 Smart Container，它负责管理简历的状态和保存逻辑。而 “TextField”、“DateField” 等则可能是 Dumb Component，只负责展示数据和收集用户输入。