在 React 中，展示组件和容器组件是两种不同的组件类型，各司其职，共同构建用户界面。理解它们之间的区别对于创建可维护且高效的 React 应用程序至关重要。
展示组件
展示组件负责渲染用户界面，它们专注于呈现数据和处理用户交互。它们通常是无状态的，这意味着它们不维护自己的内部状态。展示组件只接收 props（属性），并根据这些 props 渲染界面元素。
特点：
- 无状态（通常）
- 关注呈现
- 负责渲染用户界面
- 通常使用函数式组件或无状态类组件编写
示例：
const MyDisplayComponent = (props) => {
return <div><h1>{
props.title}</h1><p>{
props.content}</p></div>;
};
容器组件
容器组件负责管理组件的状态和逻辑，它们通常是有状态的，这意味着它们维护自己的内部状态。容器组件连接展示组件和数据或服务，为展示组件提供所需的数据和处理用户交互。
特点：
- 有状态（通常）
- 关注逻辑和状态管理
- 负责数据获取和处理用户交互
- 通常使用类组件或带有状态管理库（如 Redux）的函数组件编写
示例：
class MyContainerComponent extends React.Component {
state = {
count: 0,
};
incrementCount = () => {
this.setState({
count: this.state.count + 1 });
};
render() {
return <MyDisplayComponent title="Counter" count={
this.state.count} incrementCount={
this.incrementCount} />;
}
}
展示组件和容器组件之间的区别
展示组件和容器组件之间的主要区别在于它们的目的和职责：
| 特征 | 展示组件 | 容器组件 |
|---|---|---|
| 目的 | 渲染用户界面 | 管理状态和逻辑 |
| 状态 | 无状态（通常） | 有状态（通常） |
| 职责 | 呈现数据和处理用户交互 | 获取数据、处理用户交互和维护状态 |
| 编写方式 | 函数式组件或无状态类组件 | 类组件或带有状态管理库的函数组件 |
何时使用展示组件和容器组件
一般来说，我们应该使用展示组件来处理呈现逻辑，而使用容器组件来处理状态管理和业务逻辑。遵循此原则有助于保持代码的模块化和可维护性。
最佳实践
使用展示组件和容器组件时，应遵循一些最佳实践：
- 分离关注点：保持展示组件和容器组件的责任分离，避免将逻辑和呈现混在一起。
- 保持展示组件无状态：尽可能使展示组件无状态，这将提高性能和可测试性。
- 避免冗余：不要在展示组件和容器组件中重复代码，而是将共享逻辑提取到单独的模块中。
- 使用状态管理库：对于大型应用程序，考虑使用状态管理库（如 Redux 或 MobX）来管理组件状态。
结论
展示组件和容器组件是 React 中互补的组件类型，共同构建用户界面。展示组件专注于呈现，而容器组件则关注状态管理和业务逻辑。通过理解它们之间的区别并遵循最佳实践，我们可以创建可维护、高效且可扩展的 React 应用程序。
