目录
- 基础类
- 状态管理
- 路由管理
- UI 组件库
- 开发工具 / 辅助库
- 测试相关
- 表单和数据展示
- 其它实用类
- 代码重构
- 应用迁移：PWA
- 代码组织与架构建议（选项）
下面是一个 React 技术栈常用库/工具清单，按不同分类整理，涵盖开发、状态管理、路由、组件库、工具库、测试等，适合各种规模的项目。
基础类
| 类型 | 推荐库 / 工具 | 说明 |
|---|
| React 框架 | react, react-dom | 核心 |
| 脚手架 | Vite, Create React App, Next.js | Vite 更轻量，Next 支持 SSR |
| 打包构建 | Vite, Webpack, esbuild | 推荐 Vite |
状态管理
| 类型 | 推荐库 | 特点 |
|---|
| 全局状态 | Zustand, Redux Toolkit, Jotai, Recoil | Zustand 简洁，Redux 强大 |
| 表单状态 | react-hook-form, Formik | react-hook-form 更轻量 |
| 本地存储持久化 | zustand/middleware, redux-persist | 支持 localStorage 保存状态 |
| 异步缓存管理 | SWR, React Query | 数据请求 + 缓存 + 状态 |
路由管理
| 类型 | 推荐库 | 说明 |
|---|
| 客户端路由 | react-router-dom | 最主流 |
| 文件路由 | Next.js, Remix | 基于文件系统 |
UI 组件库
| 类型 | 推荐库 / UI 框架 | 说明 |
|---|
| 通用组件库 | Ant Design, Material UI, Chakra UI, shadcn/ui, Tailwind UI | 按需选择风格和体积 |
| 原子 CSS | Tailwind CSS | 灵活，推荐结合组件库使用 |
| 动画/过渡 | framer-motion, react-spring | framer-motion 简洁强大 |
开发工具 / 辅助库
| 类型 | 推荐库 / 工具 | 用途 |
|---|
| 类型检查 | TypeScript | 强烈推荐 |
| 类型工具库 | zod, yup, io-ts | 表单校验，结合 TS |
| 工具函数 | lodash, dayjs, date-fns | 常用 |
| 自定义 Hooks | usehooks, ahooks | 常用 |
| HTTP 请求 | axios, ky, fetch | Axios 功能更全面 |
| 权限管理 | casbin, 自定义 Hook | 控制权限逻辑 |
| 图标库 | react-icons, lucide-react, heroicons | 图标控件 |
| 调试工具 | React DevTools, why-did-you-render | 性能调试很有用 |
测试相关
| 类型 | 推荐库 | 说明 |
|---|
| 单元测试 | Jest, Vitest | Jest 成熟，Vitest 更快（Vite 生态） |
| 组件测试 | @testing-library/react, Enzyme | 推荐使用 testing-library |
| E2E 测试 | Cypress, Playwright | 用于端到端自动化测试 |
表单和数据展示
| 类型 | 推荐库 | 说明 |
|---|
| 表单构建 | react-hook-form, zod, formik | 表单验证+管理 |
| 表格展示 | antd Table, TanStack Table | antd 提供现成 UI，TanStack 更灵活 |
| 图表 | echarts-for-react, recharts, chart.js | 数据可视化 |
其它实用类
| 类型 | 推荐库 | 说明 |
|---|
| 国际化 | react-i18next, formatjs | 多语言支持 |
| 拖拽 | dnd-kit, react-beautiful-dnd | UI 拖拽 |
| 虚拟滚动/列表 | react-window, react-virtual | 适合大数据量 |
| 图片处理 | react-dropzone, react-avatar, cropperjs | 上传、裁剪等功能 |
| markdown 编辑 | react-markdown, mdx, @uiw/react-md-editor | 内容编辑展示 |
| 可访问性（a11y） | react-aria, reach-ui | 支持无障碍组件 |
代码重构
使用 react-codemod 轻松重构 React 代码：Codemods 是以编程方式在代码库上运行的转换，它们使重构代码库变得容易。
应用迁移：PWA
有时候我们需要将已经在浏览器运行的项目提供离线工作、推送通知和设备硬件访问等功能。那就要进行 pwa 迁移。
使用 vite-pwa 将你的应用转变为渐进式 Web 应用程序 (PWA)
代码组织与架构建议（选项）
- 代码风格：Prettier + ESLint + Husky + lint-staged
- 状态组织：hooks + Zustand/Redux Toolkit
- 模块拆分：
features/, components/, hooks/, utils/, types/
