React 进阶篇：路由状态管理权限工程化

一句话：React 进阶不是多背几个 Hook，而是把用户管理页放进真正的后台项目里，让路由、权限、状态、目录和检查都稳定起来。

第 4 篇 / 共 12 篇。

本篇学完你会：用 React Router、TypeScript、状态管理和工程化目录组织一个可维护的用户管理模块。

1. 什么叫 React 进阶

入门阶段关心：

组件怎么写
state 怎么改
列表怎么渲染
接口怎么请求

进阶阶段关心：

页面放在哪里
权限怎么拦
接口怎么统一
状态怎么共享
类型怎么沉淀
多人协作怎么不乱

React 后台工程化结构图

2. 路由怎么组织

用户管理页应该有稳定路由：

/admin/users
/admin/users/:id

React Router 思路：

import { createBrowserRouter } from 'react-router-dom';

export const router = createBrowserRouter([
  {
    path: '/admin',
    element: <AdminLayout />,
    children: [
      {
        path: 'users',
        element: <UserManagementPage />
      }
    ]
  }
]);

大白话：路由就是“网址到页面组件”的映射表。

3. 权限怎么控制

后台常见权限：

user:read
user:create
user:update
user:delete

按钮控制：

function PermissionButton({ permission, children }: { permission: string; children: React.ReactNode }) {
  const { permissions } = useCurrentUser();

  if (!permissions.includes(permission)) {
    return null;
  }

  return <>{children}</>;
}

使用：

<PermissionButton permission="user:create">
  <button>新增用户</button>
</PermissionButton>

路由控制也类似：进入页面前检查是否有 user:read。

4. 全局状态放什么

不是所有状态都要全局。

状态	放哪里
搜索框输入	页面本地 state
编辑弹窗草稿	表单本地 state
当前登录用户	全局状态
权限列表	全局状态
主题语言	全局状态
用户列表数据	看项目，可以本地，也可以缓存到请求库

大白话：只有多个页面都需要的数据，才值得放全局。

5. Context、Zustand、Redux 怎么选

方案	适合场景
Context	少量全局数据，比如当前用户
Zustand	中小项目，写法轻，适合业务状态
Redux Toolkit	大型项目，强规范、强调试、团队协作

Zustand 示例：

type AuthState = {
  user: CurrentUser | null;
  permissions: string[];
  setUser: (user: CurrentUser) => void;
};

export const useAuthStore = create<AuthState>((set) => ({
  user: null,
  permissions: [],
  setUser: (user) => set({ user, permissions: user.permissions })
}));

用户管理页面只读权限：

const canDelete = useAuthStore((state) => state.permissions.includes('user:delete'));

6. 用户管理模块目录

推荐目录：

src/
  features/
    users/
      api.ts
      types.ts
      hooks/
        use-users.ts
      components/
        user-filter.tsx
        user-form.tsx
        user-table.tsx
      pages/
        user-management-page.tsx

职责：

文件	职责
`types.ts`	用户相关类型
`api.ts`	用户接口请求
`use-users.ts`	用户列表业务逻辑
`components/`	可复用 UI
`pages/`	组装页面

7. TypeScript 怎么帮忙

接口返回值要有类型：

type PageResult<T> = {
  list: T[];
  total: number;
};

async function fetchUsers(query: UserQuery): Promise<PageResult<User>> {
  const response = await request.get('/users', { params: query });
  return response.data;
}

权限也可以收紧：

type PermissionCode = 'user:read' | 'user:create' | 'user:update' | 'user:delete';

这样写错权限名时，编辑器会提醒。

8. 性能优化看哪里

用户管理页面常见优化：

问题	优化
搜索频繁请求	debounce
大表格卡顿	分页或虚拟滚动
子组件重复渲染	`memo`、稳定 props
计算过滤结果贵	`useMemo`
弹窗表单太重	懒加载或拆分

不要一开始就优化。先让数据流清楚，再根据真实问题处理。

9. 常见错误

错误	后果
把所有状态塞全局	调试困难
页面直接散落 fetch	接口难维护
权限只隐藏按钮	可能绕过前端调用接口
类型全写 `any`	TypeScript 失效
目录按文件类型堆	业务越来越难找

权限尤其要记住：前端控制体验，后端负责真正安全。

10. 下一步怎么学

React 线到这里已经形成完整闭环：

组件 -> Hooks -> 请求表单 -> 路由权限 -> 状态管理 -> 工程化

下一篇建议转到 Vue 线：大白话讲解——Vue 入门篇：模板指令组件响应式.md