React 在 Web、移动端、桌面端的完整生态体系。下面我会帮你系统、全面地梳理 React 在PC端（Web） 和 移动端（App / H5）的生态，包括：
主流框架/库
UI组件库
状态管理
路由 & 网络层
构建器具 & 工程化
移动端特化生态（RN、Taro、Expo 等）
一、React PC端生态体系（Web端）
1️⃣ 基础框架层
| 类型 | 框架 / 库 | 特点 |
|---|
| SPA框架 | React | 官方核心库 |
| 同构渲染 | Next.js | 服务器端渲染（SSR）、静态生成（SSG）首选 |
| 企业后台框架 | UmiJS、Remix | Umi 集成度高（基于antd），Remix注重服务端交互 |
| 微前端 | qiankun、single-spa | 适合大型企业级系统拆分 |
2️⃣ UI组件库
| 类型 | 代表库 | 特点 |
|---|
| 企业后台 | Ant Design、Semi Design、Arco Design、Fusion Next | 美观、规范、文档完善 |
| 通用轻量化 | Chakra UI、Mantine、Material UI (MUI) | 样式灵活、TypeScript支持好 |
| 可视化组件 | ECharts for React、Recharts、Visx、Nivo | 内容可视化展示 |
| 表单增强 | react-hook-form、formik、yup | 表单验证和性能优化 |
| 图表/拖拽 | React Flow、dnd-kit、react-beautiful-dnd | 拖拽、流程图、低代码场景常用 |
3️⃣ 状态管理
| 类别 | 库 | 特点 |
|---|
| 轻量状态 | Zustand、Jotai、Recoil | Hook风格、类型安全 |
| 全局状态 | Redux Toolkit、MobX | 工程规范强、生态成熟 |
| 服务端状态 | React Query (TanStack Query)、SWR | 自动缓存与请求状态管理 |
4️⃣ 路由与网络请求
| 类别 | 库 | 特点 |
|---|
| 路由 | React Router v6+、Next.js内置路由 | 路由动态加载、嵌套路由 |
| 网络层 | Axios、Fetch API、useSWR | 常用请求封装 |
5️⃣ 工程化与构建工具
| 类型 | 工具 | 特点 |
|---|
| 构建 | Vite、Webpack、Rspack | Vite 极速构建 |
| 代码质量 | ESLint、Prettier、Stylelint | 规范化代码 |
| 类型检查 | TypeScript、tsc --noEmit | 静态类型安全 |
| 测试 | Jest、React Testing Library、Cypress | 单元测试 / E2E 测试 |
| 国际化 | react-intl、react-i18next | 多语言支持 |
| 动画 | Framer Motion、React Spring | 页面交互动效 |
6️⃣ 企业常见配套
| 模块 | 库 | 特点 |
|---|
| 图标库 | Lucide-React、React Icons、Ant Design Icons | 图标一致性 |
| 样式 | Tailwind CSS、Emotion、Styled-Components | CSS-in-JS 与原子化 |
| 富文本编辑 | React Quill、TipTap、Slate.js | 帮助复杂内容编辑 |
| 文件导出 | xlsx、jsPDF | 导出 Excel / PDF |
| 表格增强 | react-table、Ant Design Table、TanStack Table | 大数据量表格展示 |
| 权限控制 | CASL、Access 控制（Antd Pro） | RBAC权限模型 |
二、React 移动端生态体系
React 在移动端的生态分成两类：
1️⃣ H5移动端（浏览器内运行）
2️⃣ 原生应用（React Native / 混合框架）
1️⃣ H5移动端生态（基于 React）
| 模块 | 框架/库 | 特点 |
|---|
| UI组件库 | Ant Design Mobile、Vant React（社区版）、Taro UI React、NutUI React | 移动端样式、手势优化 |
| 响应式布局 | react-responsive、use-media-query、Tailwind CSS | 响应式适配 |
| 移动端交互 | better-scroll、react-swipeable | 滚动优化、滑动手势 |
| PWA增强 | workbox、vite-plugin-pwa | 离线缓存、桌面安装 |
| 适配优化 | postcss-px-to-viewport、vw/vh方案 | 像素适配 |
2️⃣ 原生应用生态（React Native）
| 分类 | 库 / 设备 | 特点 |
|---|
| 核心框架 | React Native | 官方跨平台方案（iOS / Android） |
| UI组件库 | React Native Paper、NativeBase、React Native Elements、Tamagui | 原生组件封装、暗黑模式 |
| 路由导航 | React Navigation、React Native Navigation | 多屏幕导航 |
| 状态管理 | 与Web一致：Redux / Zustand / Recoil / Jotai | 通用逻辑共享 |
| 网络请求 | Axios / Fetch | 同Web端一致 |
| 动画 | Reanimated 3、Moti、Lottie React Native | 高性能动画 |
| 原生访问 | expo-sensors、react-native-device-info、react-native-fs | 访问硬件能力 |
| 开发工具 | Expo、React Native CLI | Expo 快速开发，CLI 自定义原生模块 |
| 构建发布 | EAS Build (Expo)、Fastlane、CodePush | 构建和热更新支持 |
3️⃣ 跨端方案（React 语法统一 Web + 小程序 + RN）
| 框架 | 支持端 | 特点 |
|---|
| Taro (React版) | H5、微信/支付宝/百度小程序、RN | 统一代码多端运行 |
| Remax | 微信、支付宝小程序 | 语法贴近React原生 |
| Rax（阿里） | Web、Weex、MiniApp | 支持端广泛，阿里生态内使用 |
| Expo + Next.js | Web + 原生 | 可用 monorepo 统一管理代码 |
三、总结：生态对比总览
| 维度 | PC端（Web） | 移动端（H5） | 移动端（原生RN） |
|---|
| 核心框架 | React / Next.js / Umi | React | React Native / Expo |
| UI库 | Antd / MUI / Arco | Antd Mobile / NutUI | RN Paper / Tamagui |
| 状态管理 | Redux / Zustand | 同上 | 同上 |
| 动画 | Framer Motion | Framer Motion / React Spring | Reanimated / Moti |
| 可视化 | ECharts / Recharts | 轻量ECharts | RN-SVG / RN-Charts |
| 构建 | Vite / Webpack | Vite | Metro Bundler / EAS |
| 特点 | 企业后台、信息展示 | 轻交互、H5页面 | 高性能原生体验 |
浙公网安备 33010602011771号