React Hooks与Redux环境下，容器/展示组件模式仍适用吗？

答案是：不需要严格遵循传统的容器/展示组件拆分，但可以保留其「分离关注点」的核心思想，结合Hooks和RTK的特性灵活调整。

传统模式的本质与局限性 #

传统的容器/展示拆分，核心是为了解耦「数据逻辑」和「UI渲染」——在Hooks出现前，类组件的逻辑复用和状态管理比较繁琐，只能通过容器组件统一处理数据，再把props传给纯UI的展示组件。但Hooks（尤其是自定义Hooks）和Redux Toolkit、RTK Query的出现，已经解决了很多之前的痛点：

• RTK Query直接封装了数据获取、缓存、更新的逻辑，useQuery/useMutation这类Hook可以直接在组件中调用，不需要额外的容器层。
• 自定义Hooks可以轻松复用Redux相关逻辑，比如把useSelector+useDispatch的组合抽成独立Hook，避免重复代码。

直接在展示组件用Redux Hooks的问题与解决 #

你遇到的「组件混淆、层级混乱」，根源不是“展示组件用了Hook”，而是没有明确组件的职责边界：

• 不要让通用UI组件（比如<Button>、<Card>）直接依赖Redux，这类组件应该保持纯展示，只接收props和回调。
• 业务场景组件（比如<UserList>、<OrderDetail>）可以直接使用Redux Hooks，因为它们本身就负责特定业务的逻辑和渲染——这不是“伪展示组件”，而是「业务组件」，只要职责单一即可。

举个实际的例子：先把用户列表的逻辑抽成自定义Hook

// hooks/useUserList.js
import { useGetUsersQuery } from '../services/api';
import { useDispatch } from 'react-redux';
import { deleteUserAction } from '../features/usersSlice';

export const useUserList = () => {
  const { data: users, isLoading, error } = useGetUsersQuery();
  const dispatch = useDispatch();

  const deleteUser = (userId) => {
    dispatch(deleteUserAction(userId));
  };

  return { users, isLoading, error, deleteUser };
};

然后在业务组件中调用Hook，再把数据传给纯展示组件：

// components/UserList.js
import { useUserList } from '../hooks/useUserList';
import { UserCard } from './UserCard'; // 纯展示组件，仅接收props

export const UserList = () => {
  const { users, isLoading, error, deleteUser } = useUserList();

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>错误：{error.message}</div>;

  return (
    <div className="user-list">
      {users.map(user => (
        <UserCard 
          key={user.id} 
          user={user} 
          onDelete={() => deleteUser(user.id)} 
        />
      ))}
    </div>
  );
};

这样既避免了巨型容器，又保持了UI组件的纯净，逻辑也清晰可复用。

容器组件的新定位 #

现在容器组件不再是必须的“统一数据管理者”，而是在需要协调多个独立业务逻辑的场景下才有用：比如一个页面需要同时获取用户、订单、权限三类数据，或者需要统一处理多个子组件的状态联动，这时可以用一个容器组件来整合这些逻辑，再把必要的数据传给子组件。但这种场景已经不多见，因为自定义Hooks和RTK Query已经能很好地处理大部分数据逻辑。

总结 #

容器/展示模式的核心是「分离关注点」，而不是“必须拆分两种组件”。在Hooks+RTK的技术栈中，更高效的方式是：

• 用自定义Hooks封装数据逻辑，复用Redux相关操作
• 区分纯展示组件（通用UI，无状态/无Redux依赖）和业务组件（处理特定业务逻辑，可使用Redux Hooks）
• 仅在需要全局协调多模块逻辑时，才考虑使用容器组件

内容的提问来源于stack exchange，提问作者edoedoedo