容器/展示模式

什么是容器/展示模式？

容器/展示模式（Container/Presentational Pattern）是一种在 React 中常用的设计模式，旨在将组件的逻辑与 UI 分离。通过这种模式，我们可以将负责数据获取、状态管理和业务逻辑的部分（容器组件）与负责渲染 UI 的部分（展示组件）分开，从而使代码更易于维护和测试。

为什么使用容器/展示模式？

1. 关注点分离：逻辑和 UI 分离，使代码更清晰。
2. 可复用性：展示组件可以复用，因为它们不依赖于特定的逻辑。
3. 可测试性：容器组件和展示组件可以分别测试，简化测试流程。
4. 团队协作：前端开发者和后端开发者可以并行工作，互不干扰。

---

容器组件 vs 展示组件

容器组件

• 负责处理数据逻辑、状态管理和副作用（如 API 调用）。
• 通常是无 UI 的组件，或者只包含最少的 UI。
• 通过 props 将数据传递给展示组件。

展示组件

• 负责渲染 UI，通常是纯函数组件。
• 不关心数据来源，只负责接收 props 并渲染。
• 易于复用和测试。

---

代码示例

场景：用户列表页面

假设我们需要构建一个用户列表页面，从 API 获取用户数据并显示。

1. 容器组件：UserListContainer.js

javascript

import React, { useState, useEffect } from 'react';
import UserList from './UserList';

const UserListContainer = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 模拟 API 调用
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return <UserList users={users} />;
};

export default UserListContainer;

2. 展示组件：UserList.js

javascript

import React from 'react';

const UserList = ({ users }) => {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

3. 使用容器组件

javascript

import React from 'react';
import UserListContainer from './UserListContainer';

const App = () => {
  return (
    <div>
      <h1>User List</h1>
      <UserListContainer />
    </div>
  );
};

export default App;

---

实际应用场景

场景 1：数据驱动的仪表盘

• 容器组件负责从多个 API 获取数据并处理。
• 展示组件负责渲染图表、表格等 UI 元素。

场景 2：表单处理

• 容器组件负责表单验证、提交逻辑和状态管理。
• 展示组件负责渲染表单字段和错误提示。

---

总结

容器/展示模式是一种强大的设计模式，能够帮助你将逻辑与 UI 分离，使代码更清晰、可维护性更高。通过将数据获取和状态管理放在容器组件中，并将 UI 渲染放在展示组件中，你可以轻松地复用和测试组件。

提示

• 尽量保持展示组件的纯净，避免在其中处理逻辑。
• 使用 React Hooks（如 useState 和 useEffect）可以简化容器组件的编写。

---

附加资源

1. React 官方文档
2. React Hooks 指南
3. 容器/展示模式详解

---

练习

1. 尝试将现有的 React 组件重构为容器/展示模式。
2. 创建一个新的 React 应用，使用容器/展示模式实现一个简单的待办事项列表。
3. 思考：在什么情况下容器/展示模式可能不适合使用？