1. 场景定义
- 单页应用（SPA）
- 无 Node.js 服务端，无 SSR / RSC
- 构建产物为静态文件，部署至 CDN 或静态托管
2. 核心框架与语言
| 组件 |
选型 |
说明 |
| UI 框架 |
React 19 |
稳定版本，使用函数组件与 Hooks |
| 编程语言 |
TypeScript 5.x |
严格模式，必选 |
| 构建工具 |
Vite 6.x |
官方推荐，替代 CRA，极速启动与热更新 |
3. 路由
- React Router DOM v7
SPA 路由事实标准，支持嵌套路由、加载器、错误边界，与 Vite 完美集成。
4. 状态管理
- 远程服务器状态（API 数据） ：TanStack Query v5
负责请求缓存、重试、轮询、去重，减少手动管理 loading/error 状态。
- 客户端全局状态（UI 状态、用户信息等） ：Zustand v5
API 简洁，无模板代码，性能优于 Redux。
- 简单跨组件传值：优先使用 React Context + useReducer，不引入外部库。
5. UI 组件库
- 企业后台/中台：Ant Design 或 Material-UI（MUI），组件丰富，生态成熟。
- 高度定制设计：shadcn/ui（源码复制，无额外依赖，完全可控）。
6. 网络请求与模拟
- HTTP 客户端：Axios（拦截器方便）或原生 fetch（与 TanStack Query 配合良好）。
- 开发环境 Mock：MSW（Mock Service Worker），拦截浏览器请求，模拟完整 API。
7. 测试方案
- 单元/集成测试：Jest + React Testing Library（用户行为驱动）。
- 端到端测试：Cypress 或 Playwright（按需选用）。
8. 代码质量与规范
- ESLint + Prettier（强制统一代码风格）。
- Husky + lint-staged（提交前自动校验）。
9. 部署
- 执行
npm run build 生成 dist 静态目录。
- 部署至 Nginx、OSS、Vercel/Netlify 等静态托管服务，无需服务器端配置。
10. 性能与优化注意事项
- 路由懒加载：使用
React.lazy() + Suspense 按需加载页面组件。
- 若需 SEO 支持，可额外使用预渲染方案（如
vite-plugin-ssr 或 prerender-spa-plugin），但此非 SPA 默认能力。
总结选型清单
| 功能 |
工具 |
| 框架 |
React 19 |
| 语言 |
TypeScript |
| 构建 |
Vite |
| 路由 |
React Router DOM v7 |
| 数据缓存 |
TanStack Query v5 |
| 全局状态 |
Zustand v5 |
| UI 组件 |
Ant Design / shadcn/ui |
| HTTP |
Axios |
| Mock |
MSW |
| 测试 |
Jest + RTL，Cypress |
| 规范 |
ESLint + Prettier |
此清单为 2026 年 React 纯前端 SPA 的标准化选型，可覆盖绝大多数中后台及 C 端应用需求，兼顾开发效率、性能与可维护性。