展示组件(Presentationalcomponent)和容器组件 (Containercomponent)之间有何不同？

这两个是 React 架构设计中的经典概念

展示组件（Presentational Component）

作用：

负责 UI 展示 —— 即“长什么样”。

特点：

• 只关心如何显示数据，不关心数据从哪里来。

• 一般通过 props 接收数据和事件回调。

• 不直接依赖 Redux 或业务逻辑。

• 可以写成 函数组件 或简单的 Vue 组件。

• 可被复用、可测试性强。

示例：

// 展示组件 (只渲染 UI，不处理数据)
function UserList({ users, onSelect }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id} onClick={() => onSelect(user)}>
          {user.name}
        </li>
      ))}
    </ul>
  );
}

容器组件（Container Component）

作用：

负责业务逻辑 —— 即“做什么事”。

特点：

• 负责 数据获取、状态管理、逻辑控制。

• 通过 Redux、Hooks 或 API 调用 获取数据。

• 把数据和回调函数通过 props 传递给展示组件。

• 一般不会有太多 HTML/JSX。

示例：

// 容器组件 (管理数据，调用展示组件)
import { useSelector, useDispatch } from 'react-redux';
import { fetchUsers } from './userSlice';
import UserList from './UserList';

function UserContainer() {
  const dispatch = useDispatch();
  const users = useSelector(state => state.users.list);

  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);

  const handleSelect = (user) => {
    console.log('Selected:', user);
  };

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

核心区别对比

对比点	展示组件 (Presentational)	容器组件 (Container)
主要职责	负责 UI 展示	负责数据逻辑和状态管理
是否访问 Redux/Store	否	是
数据来源	props	Redux / API / Hooks
是否复用性高	✅ 高	❌ 一般较低
是否包含业务逻辑	❌ 否	✅ 是
示例	<UserList />	<UserContainer />

现代趋势

在 React Hooks 出现后，这种严格划分的界限变得模糊了。
你可以在同一个组件里用 useState、useEffect 同时处理逻辑和展示。
但在大型项目中，保持「UI 与逻辑分层」仍然是很好的实践。