尧图网站建设 
当你的 React 项目从简单的 Demo 走向真实的中后台系统时一定会遇到一个现实问题单靠 React 本体已经不够用了。路由怎么切状态放哪接口请求怎么管理几十个表单怎么处理组件是自己写还是用现成的这些问题的背后几乎都有对应的一套成熟方案。本文称得上是一份“React 主流库全景梳理”我会把 React 生态里最常见的几类库逐个讲清楚它们解决什么问题、核心用法是什么、相互之间怎么选。内容会尽量保持“12 分钟能读完”的节奏每个库都会给出最小可运行的示例方便你对照理解。无论你是刚学完 React 基础准备做项目的同学还是有一定经验、想系统梳理生态选型的开发者这篇文章都值得收藏备用。1. 为什么要了解 React 主流库1.1 从一个业务项目说起假设你要开发一个后台管理系统左侧菜单、顶部栏、中间是包含表格和表单的内容区。这个系统需要跳转多个页面、共享登录用户信息、从接口拉取列表数据、提交表单、还要在不同页面之间传递参数。如果只用 React 本身来实现你会发现自己要重复处理很多麻烦事页面跳转和浏览器前进后退的对应关系要自己维护全局用户状态要通过逐层 props 传递改起来非常痛苦接口请求要自己封装 loading、error、缓存、重试逻辑表单校验要自己写状态和校验规则表格、弹窗、日期选择等通用组件要从零开发。这些问题不是 React 自己没有能力做而是每个项目都从零造一遍轮子成本太高。于是 React 生态里逐渐沉淀出了大量“主流库”路由有 React Router状态有 Redux 和 Zustand请求有 TanStack Query 和 SWRUI 有 Ant Design表单有 React Hook Form测试有 Vitest 和 React Testing Library。1.2 React 生态的核心分工React 更像是一个“乐高底座”它提供了组件化渲染的能力但把一个完整项目拼起来还需要很多积木块。下面是 React 生态里最常见的分工问题域代表库解决什么问题页面路由React Router、Next.js管理 URL 与页面组件的对应关系状态管理Redux Toolkit、Zustand、Jotai、MobX管理全局共享数据UI 组件Ant Design、Material UI、Vant、Arco Design提供开箱即用的组件数据请求TanStack Query、SWR简化接口请求、缓存、更新表单处理React Hook Form、Formik处理表单状态、校验、提交动画交互Framer Motion用声明式方式做动画元框架Next.js、Remix提供 SSR、约定式路由、构建等一体化能力测试Vitest、Jest、React Testing Library组件测试与单元测试掌握了这些库你的 React 开发效率会有一个质的提升。下面我们从环境准备开始把每一类库都过一遍。1.3 本文阅读方式如果你对某个库已经很熟悉可以直接跳到感兴趣的部分如果你是初学者建议按顺序读。文章中的代码示例尽量独立你可以复制到自己的项目里运行。需要注意的是React 生态更新速度较快文中的 API 以当前常见版本为例具体使用时要根据实际安装的版本调整。2. 环境准备与示例项目2.1 基础环境本文示例使用以下基础环境Node.js建议 18 或 20 及以上版本包管理器npm、pnpm 或 yarn 均可构建工具Vite它是目前 React 项目初始化最快的方式之一React 版本以 React 18 / React 19 环境为例文中的代码在两个版本下都可以运行。如果你本机还没有安装 Node.js请先到 Node.js 官网下载 LTS 版本。安装完成后在终端执行node -v和npm -v可以验证是否成功。2.2 创建 Vite 项目打开终端执行下面的命令创建一个 React TypeScript 项目npm create vitelatest react-ecosystem-demo -- --template react-ts创建完成后进入项目目录并安装依赖cd react-ecosystem-demo npm install启动项目npm run dev启动后浏览器访问终端输出的地址会看到 Vite React 的默认页面说明项目创建成功。2.3 安装后续示例需要的库在后面的章节中我们会陆续用到以下库。你可以按需安装不需要一次全部装完npm install react-router-dom npm install reduxjs/toolkit react-redux npm install zustand npm install antd npm install tanstack/react-query npm install swr npm install react-hook-form npm install framer-motion安装完成后我们开始逐个了解这些库。3. 路由方案React Router3.1 前端路由解决了什么在没有前端路由的年代页面跳转靠的是后端返回不同的 HTML 页面。前端路由出现后切换页面不再刷新整个网页而是由 JavaScript 监听 URL 变化再渲染对应的组件。这样做的好处是页面切换更快、交互更流畅也更符合单页应用SPA的体验。React Router 是 React 生态里使用最广泛的路由库。它提供了声明式的路由配置方式你只需要定义“什么路径显示什么组件”剩下的匹配逻辑由路由库处理。3.2 一个最小路由示例现在我们在src目录下创建页面组件然后配置路由。文件路径src/pages/Home.tsxexport default function Home() { return div首页/div; }文件路径src/pages/About.tsxexport default function About() { return div关于我们/div; }文件路径src/main.tsximport { createRoot } from react-dom/client; import { createBrowserRouter, RouterProvider } from react-router-dom; import Home from ./pages/Home; import About from ./pages/About; const router createBrowserRouter([ { path: /, element: Home /, }, { path: /about, element: About /, }, ]); createRoot(document.getElementById(root)!).render( RouterProvider router{router} / );这里使用了createBrowserRouter来创建路由实例再用RouterProvider渲染。path是浏览器地址栏中的路径element是对应要渲染的组件。3.3 常见路由场景实际开发中我们通常还会用到这几个 APILink用于页面跳转类似 HTML 的a标签useNavigate在事件处理函数中编程式跳转useParams获取路由参数例如/user/:id中的idOutlet渲染嵌套路由的子组件。下面是一个带导航栏和嵌套路由的示例import { Link, Outlet } from react-router-dom; export default function Layout() { return ( div nav Link to/首页/Link Link to/about关于/Link /nav Outlet / /div ); }这里需要提醒的是路由组件必须在路由上下文内部使用。如果你在组件里调用useNavigate时出现类似 “useNavigate may be used only in the context of a Router component” 的报错多半是因为组件没有放在路由容器中。4. 状态管理Redux Toolkit、Zustand、Jotai4.1 为什么需要状态管理库React 自带useState为什么还需要状态管理库因为当多个层级、多个页面需要共享同一份数据时useState会带来严重的 props 层层传递问题。例如登录用户信息、购物车数据、全局主题配置这些数据分布在很多组件中。如果每次修改都要在父组件里定义一个 state再通过 props 一层层往下传组件一多代码会非常难维护。状态管理库的作用是把共享数据集中管理任何组件都可以直接读取和修改不需要关心数据从哪个父组件来。4.2 Redux Toolkit 快速上手Redux 是 React 生态里老牌状态库现在官方推荐直接使用 Redux Toolkit简称 RTK它封装了大部分样板代码。先安装依赖npm install reduxjs/toolkit react-redux创建一个计数器 slice文件路径src/store/counterSlice.tsimport { createSlice } from reduxjs/toolkit; interface CounterState { value: number; } const initialState: CounterState { value: 0, }; const counterSlice createSlice({ name: counter, initialState, reducers: { increment: (state) { state.value 1; }, decrement: (state) { state.value - 1; }, }, }); export const { increment, decrement } counterSlice.actions; export default counterSlice.reducer;创建 store文件路径src/store/index.tsimport { configureStore } from reduxjs/toolkit; import counterReducer from ./counterSlice; export const store configureStore({ reducer: { counter: counterReducer, }, }); export type RootState ReturnTypetypeof store.getState; export type AppDispatch typeof store.dispatch;在入口文件提供 store文件路径src/main.tsximport { Provider } from react-redux; import { store } from ./store; // 在渲染组件的外层包裹 Provider Provider store{store} App / /Provider在组件中使用import { useDispatch, useSelector } from react-redux; import { increment, decrement } from ../store/counterSlice; import type { RootState } from ../store; export function Counter() { const count useSelector((state: RootState) state.counter.value); const dispatch useDispatch(); return ( div span{count}/span button onClick{() dispatch(increment())}1/button button onClick{() dispatch(decrement())}-1/button /div ); }这里需要注意的是RTK 内部使用了 Immer所以在 reducer 里可以直接修改 state 的写法不需要手动展开对象。4.3 Zustand 轻量方案Zustand 是一个比 Redux 更轻量的状态管理库它的特点是不需要 Provider 包裹API 也非常简洁。先安装npm install zustand创建 storeimport { create } from zustand; interface CounterStore { count: number; increase: () void; decrease: () void; } export const useCounterStore createCounterStore((set) ({ count: 0, increase: () set((state) ({ count: state.count 1 })), decrease: () set((state) ({ count: state.count - 1 })), }));组件中使用import { useCounterStore } from ../store/useCounterStore; export function Counter() { const count useCounterStore((state) state.count); const increase useCounterStore((state) state.increase); const decrease useCounterStore((state) state.decrease); return ( div span{count}/span button onClick{increase}1/button button onClick{decrease}-1/button /div ); }Zustand 的写法非常直观。它相比于 Redux 省去了 action、reducer、dispatch 等概念适合中小型项目使用。4.4 状态库怎么选如果项目不大、共享状态少Zustand 是性价比最高的选择如果项目团队已经熟悉 Redux 的编程模式或者需要严格的数据流控制Redux Toolkit 依然是稳定的方案Jotai 适合粒度更细的原子状态管理和 Zustand 类似也是轻量路线适合喜欢更细拆分状态的团队MobX 的特点是响应式编程如果你习惯 Vue 那种自动追踪依赖的写法可以关注 MobX。这里想提醒一句状态管理库只是工具不要为了“热门”而引入。很多场景下React 自带的 context 配合useReducer已经够用。5. UI 组件库Ant Design 与多端选择5.1 组件库的价值中后台项目里页面上的表格、表单、弹窗、按钮、日期选择器样式和交互都是高度相似的。如果每个项目都从零实现不仅开发效率低设计规范也很难统一。组件库把这些通用能力沉淀下来开箱即用。React 生态里的组件库非常多国内团队最熟悉的多半是 Ant Design它由蚂蚁集团开源是 React 生态里覆盖度最全的组件库之一。5.2 用 Ant Design 搭建一个页面先安装npm install antdAnt Design 5.x 推荐在入口文件使用 ConfigProvider可以统一配置语言、主题等。文件路径src/main.tsximport { ConfigProvider } from antd; import zhCN from antd/locale/zh_CN; ConfigProvider locale{zhCN} App / /ConfigProvider在页面中使用组件import { Button, DatePicker, Table, message } from antd; import type { ColumnsType } from antd/es/table; interface User { id: number; name: string; age: number; } const columns: ColumnsTypeUser [ { title: 姓名, dataIndex: name }, { title: 年龄, dataIndex: age }, ]; const data: User[] [ { id: 1, name: 张三, age: 28 }, { id: 2, name: 李四, age: 32 }, ]; export function UserTable() { const handleCreate () { message.success(创建成功); }; return ( div Button typeprimary onClick{handleCreate} 新建用户 /Button DatePicker style{{ marginLeft: 16 }} / Table rowKeyid columns{columns} dataSource{data} / /div ); }从上面的代码可以看出组件库把表格的列定义、数据源、按钮样式都封装好了我们只需要关心业务数据。5.3 中后台与 C 端组件库对比中后台管理系统Ant Design、Arco Design、TDesign 都是不错的选择它们对表格、表单、权限布局的支持非常成熟C 端页面/移动端 H5可以选择 Vant、NutUI 等移动端组件库国际化产品Material UIMUI在海外团队中使用广泛无头组件库Headless UI、Radix UI 只提供交互逻辑和可访问性不提供样式适合需要定制视觉风格的项目。组件库不是越重越好。如果你们的视觉风格高度定制选择一个“轻样式”的无头组件库会比强行覆盖 Ant Design 的样式更省力。6. 数据请求TanStack Query 与 SWR6.1 手动请求的痛点很多 React 开发者最初的请求写法是useEffectfetchconst [data, setData] useState([]); const [loading, setLoading] useState(true); useEffect(() { fetch(/api/list) .then((res) res.json()) .then((data) { setData(data); setLoading(false); }); }, []);这种写法的缺点在于loading、error、success 状态需要手工管理多个组件请求同一接口会重复发送离开页面后响应回来还可能造成内存泄漏警告。TanStack Query原名 React Query和 SWR 就是来解决这些问题的。6.2 用 useQuery 接管异步状态先安装npm install tanstack/react-query在入口配置 QueryClientProviderimport { QueryClient, QueryClientProvider } from tanstack/react-query; const queryClient new QueryClient(); QueryClientProvider client{queryClient} App / /QueryClientProvider在组件中使用import { useQuery } from tanstack/react-query; interface User { id: number; name: string; } async function fetchUsers(): PromiseUser[] { const res await fetch(/api/users); if (!res.ok) { throw new Error(请求失败); } return res.json(); } export function UserList() { const { data, isLoading, isError, error } useQuery({ queryKey: [users], queryFn: fetchUsers, }); if (isLoading) { return div加载中.../div; } if (isError) { return div加载失败{error.message}/div; } return ( ul {data?.map((user) ( li key{user.id}{user.name}/li ))} /ul ); }queryKey是缓存的身份标识queryFn是请求函数。TanStack Query 会自动缓存数据在组件重新挂载时优先读取缓存并在后台重新校验数据是否过期。它还提供了refetch、invalidateQueries、prefetch等 API适合复杂的数据同步场景。6.3 TanStack Query 与 SWR 对比SWR 是 Vercel 团队出品的数据请求库名称来自 HTTP 的 stale-while-revalidate 缓存策略使用方式同样简洁import useSWR from swr; const fetcher (url: string) fetch(url).then((res) res.json()); export function UserList() { const { data, error, isLoading } useSWR(/api/users, fetcher); if (isLoading) return div加载中.../div; if (error) return div加载失败/div; return ul{data?.map((user: any) li key{user.id}{user.name}/li)}/ul; }两者的核心思路非常相似。如果项目已经使用了 React Query 的缓存机制继续使用即可如果喜欢更轻的 APISWR 也是很好的选择。个人建议新项目里优先考虑 TanStack Query它的 TypeScript 支持和 API 完整性会更好一些。7. 表单处理React Hook Form7.1 表单在 React 中的痛点中后台项目里表单是最常见的页面类型但表单的状态处理非常繁琐每个输入框都要绑定 value监听 onChange还要维护错误信息。字段一多组件会充满大量重复的状态代码。React Hook Form 通过自定义 Hook 注册表单字段用“非受控”方式减少重新渲染的次数并且内置了校验、错误提示、提交处理等能力。7.2 最小示例先安装npm install react-hook-form下面是一个带必填校验的登录表单import { useForm, SubmitHandler } from react-hook-form; interface LoginForm { username: string; password: string; } export function LoginPage() { const { register, handleSubmit, formState: { errors }, } useFormLoginForm(); const onSubmit: SubmitHandlerLoginForm (data) { console.log(提交的数据, data); }; return ( form onSubmit{handleSubmit(onSubmit)} div input placeholder用户名 {...register(username, { required: 用户名不能为空 })} / {errors.username p{errors.username.message}/p} /div div input typepassword placeholder密码 {...register(password, { required: 密码不能为空, minLength: { value: 6, message: 密码至少6位 }, })} / {errors.password p{errors.password.message}/p} /div button typesubmit登录/button /form ); }register返回一组属性onChange、onBlur、name等展开到输入框上即可。校验规则写在register的第二个参数里提交时只有通过全部校验才会触发onSubmit。7.3 与组件库组合使用React Hook Form 经常和 Ant Design 这类组件库组合。需要注意的是Ant Design 的表单组件是“受控组件”需要用到Controller来做适配import { Controller, useForm } from react-hook-form; import { Input, Button } from antd; export function AntdForm() { const { control, handleSubmit } useForm{ username: string }(); return ( form onSubmit{handleSubmit((data) { console.log(data); })} Controller nameusername control{control} rules{{ required: 请输入用户名 }} render{({ field }) Input {...field} placeholder用户名 /} / Button htmlTypesubmit typeprimary 提交 /Button /form ); }初学者最容易在这里踩坑直接用register去绑 AntD 的Input结果发现输入框无法输入。原因是 AntD 的组件需要value和onChange受控而Controller正好负责把这两者连接起来。8. 动画方案Framer Motion8.1 React 动画方案有哪几类React 里做动画主要有三类方式CSS 过渡和动画最简单但对于复杂交互动效控制起来很麻烦动画库Framer Motion、React Spring把动画抽象成声明式 API页面切换动画可以配合路由懒加载和动画库实现。Framer Motion 是 React 生态里比较受欢迎的动画库它提供了motion组件配合initial初始状态和animate目标状态就能完成动画。8.2 最小动画示例先安装npm install framer-motion示例一个按钮点击后让方块移动和旋转import { motion } from framer-motion; export function AnimatedBox() { return ( motion.div style{{ width: 100, height: 100, backgroundColor: #1677ff }} initial{{ opacity: 0, x: -100 }} animate{{ opacity: 1, x: 0 }} transition{{ duration: 0.5 }} whileHover{{ scale: 1.1 }} whileTap{{ scale: 0.95 }} / ); }motion.div是 Framer Motion 提供的动画组件initial定义动画开始时的样式animate定义结束样式transition控制时长和缓动函数。whileHover和whileTap则分别对应鼠标悬停和点击效果。8.3 生产建议动画在实际项目中要克制使用。页面级动画、弹窗出现动画、列表增删动画这些对体验提升明显但装饰性动画过多会拖慢页面也容易让用户感到疲劳。建议先完成无动画的完整功能再逐步加交互反馈。9. SSR 元框架Next.js 与 Remix9.1 为什么需要元框架纯 Vite React 的 SPA 在首屏渲染时浏览器拿到的是空 HTML所有内容都要靠 JavaScript 渲染。这会带来两个问题首屏加载较慢且搜索引擎对内容索引不友好。于是出现了“元框架”它们在 React 之上提供了服务端渲染SSR、静态生成SSG、文件路由、加载优化等能力。Next.js 是目前最主流的 React 元框架社区生态强大Vercel 也在持续维护。9.2 Next.js App Router 核心概念现代 Next.js 推荐使用 App Router目录结构如下app/ layout.tsx page.tsx about/ page.tsxlayout.tsx定义全局布局page.tsx对应路由页面。在 App Router 中组件默认是 Server Component服务端组件只有文件顶部添加use client才会变成 Client Component客户端组件这时才能使用useState、useEffect等浏览器 API。一个最简单的页面文件路径app/page.tsxexport default function Home() { return ( main h1Hello Next.js/h1 /main ); }如果你需要交互就添加use clientuse client; import { useState } from react; export default function Counter() { const [count, setCount] useState(0); return ( button onClick{() setCount(count 1)}点击次数{count}/button ); }新手容易遇到的问题是把useState写在没有use client的组件里导致构建报错。9.3 什么时候选元框架需要 SEO 优化的内容型网站建议选 Next.js团队希望把前端和后端逻辑写在一起用 API Routes 或 Server Actions元框架很有价值如果只是内部后台管理系统对 SEO 没有要求那么 Vite React 仍然更简单。选择元框架意味着引入更多约定学习成本会更高。请根据自己的项目需求决定不要盲目追新。10. 测试工具链Vitest 与 React Testing Library10.1 前端测试的组成前端测试通常分为三层单元测试测试不含 UI 的业务逻辑组件测试渲染组件并验证交互行为端到端测试E2E模拟真实用户操作完整流程。React 技术栈里最常用的组合是 Vitest 或 Jest 作为测试运行器配合 React Testing Library 来模拟组件渲染和用户交互。10.2 基础组件测试先安装测试依赖npm install -D vitest testing-library/react testing-library/jest-dom testing-library/user-event jsdom在vite.config.ts中配置测试环境import { defineConfig } from vite; import react from vitejs/plugin-react; export default defineConfig({ plugins: [react()], test: { environment: jsdom, }, });测试一个简单的计数组件文件路径src/components/Counter.test.tsximport { describe, it, expect } from vitest; import { render, screen } from testing-library/react; import userEvent from testing-library/user-event; import { Counter } from ./Counter; describe(Counter, () { it(点击按钮后计数增加, async () { render(Counter /); const button screen.getByRole(button, { name: /点击次数/ }); await userEvent.click(button); expect(screen.getByText(点击次数1)).toBeDefined(); }); });这里使用render渲染组件screen.getByRole查找元素userEvent.click模拟用户点击最后用expect断言界面变化。10.3 测试优先级对于很多小团队而言不必追求每个组件都有完整测试。更实际的做法是核心业务逻辑一定要测涉及表单、权限判断等关键交互的组件要测纯展示型组件可以少测或不测复杂流程用 E2E 工具覆盖比写大量组件测试更划算。测试是为了保证重构安全不是为了凑覆盖率。11. 常见问题与排查思路11.1 高频报错对照表React 生态里每个库都有自己容易踩的坑下面整理一些常见问题问题现象常见原因解决思路路由跳转后页面空白路由配置路径错误或组件未导出检查path和element是否正确useNavigate 报错组件不在 Router 上下文内确保组件被 RouterProvider 包裹Redux 状态更新了但界面不变selector 选择范围过大或返回新引用检查 selector必要时 useShallowReact Query 报 “No QueryClient set”忘记包裹 QueryClientProvider在根部添加 ProviderAntD Input 无法输入与 React Hook Form 直接用 register 绑定改用 ControllerNext.js 使用 useState 报错Server Component 中使用了客户端 API添加use client组件库样式不生效未引入样式文件或按需加载配置不对检查 import 和构建配置11.2 典型排查流程遇到报错时不建议直接复制搜索引擎的结果而是先按下面的顺序排查看清报错信息中的文件名和行号检查依赖是否安装完整版本是否与示例一致检查组件是否被正确的 Provider 包裹查看控制台完整报错堆栈关注第一个报错位置使用最小复现方式删掉业务代码保留最简结构验证确认问题后再回到业务代码中逐段对照。多数 React 生态报错的核心都不是语法难而是“上下文缺失”或“版本不兼容”。11.3 版本兼容注意点React 生态更新很快尤其是 React 19 发布后部分第三方库升级需要时间。安装依赖时要注意查看包的peerDependencies是否支持当前的 React 版本升级大版本前先看官方升级指南和 breaking changes遇到兼容问题优先查阅 GitHub Issues而不是盲目降低依赖版本。12. 主流库选型建议12.1 按项目规模选型不同规模的项目适合的技术组合不同。小型项目 / 个人项目Vite React Router Zustand Ant Design React Hook Form中小型中后台Vite React Router Zustand/Redux Toolkit TanStack Query Ant Design Vitest需要 SEO 或 SSR 的场景Next.jsApp Router Zustand TanStack Query Ant Design Vitest移动端 H5Vite React Zustand Vant React Router12.2 组合示例省市数据联动小页面把上面几个库组合起来做一个常见的小功能选择省然后联动加载市列表。这里重点展示 React Hook Form、Ant Design 和 TanStack Query 的分工。use client; import { Controller, useForm } from react-hook-form; import { Select } from antd; import { useQuery } from tanstack/react-query; interface Province { code: string; name: string; } interface City { code: string; name: string; } // 这里用模拟数据代替真实接口 const provinces: Province[] [ { code: 110000, name: 北京市 }, { code: 440000, name: 广东省 }, ]; const cityMap: Recordstring, City[] { 110000: [{ code: 110100, name: 北京市 }], 440000: [ { code: 440100, name: 广州市 }, { code: 440300, name: 深圳市 }, ], }; async function fetchCities(provinceCode: string): PromiseCity[] { return Promise.resolve(cityMap[provinceCode] ?? []); } export function LocationSelect() { const { control, watch } useForm{ province: string; city: string }({ defaultValues: { province: undefined, city: undefined }, }); const province watch(province); const { data: cities [], isLoading } useQuery({ queryKey: [cities, province], queryFn: () fetchCities(province), enabled: Boolean(province), }); return ( Controller nameprovince control{control} render{({ field }) ( Select {...field} placeholder请选择省份 style{{ width: 200 }} options{provinces.map((p) ({ label: p.name, value: p.code }))} / )} / Controller namecity control{control} render{({ field }) ( Select {...field} placeholder请选择城市 style{{ width: 200 }} loading{isLoading} disabled{!province} options{cities.map((c) ({ label: c.name, value: c.code }))} / )} / / ); }这个案例是搜索热词里“省市查询组件”一类需求的典型实现思路。注意useQuery的enabled参数没有选择省份时不会发城市请求选择了省份后queryKey变化触发重新请求。12.3 选型原则选型时不要只看“哪个库 star 多”还要考虑团队熟悉度、项目规模和长期维护能力。优先选择官方维护活跃、文档完善的库同时尽量控制库的数量避免项目依赖膨胀。13. 最佳实践与工程建议13.1 依赖锁定与升级策略生产项目应当提交package-lock.json、pnpm-lock.yaml或yarn.lock保证不同开发环境下依赖版本一致。需要升级库时尽量避免直接执行npm install xxxlatest而是先查看 release notes评估 breaking changes 后再升级。13.2 按需加载与代码分割大型 React 项目要关注包体积。可以使用 React Router 的路由懒加载把页面拆分到不同 chunkconst Home lazy(() import(../pages/Home)); const About lazy(() import(../pages/About));组件库方面Ant Design 5.x 默认支持 tree-shaking配合 Vite 等现代构建工具只需按需引入组件即可。对于体积较大的图表库、富文本编辑器尽量在用到时才动态加载。13.3 组件库与业务解耦不要在整个业务代码里到处直接import { Button } from antd。可以在项目里封装一层基础组件层例如// src/components/AppButton.tsx import { Button } from antd; import type { ButtonProps } from antd; export function AppButton(props: ButtonProps) { return Button {...props} /; }这样做的好处是未来如果从 Ant Design 迁移到其他组件库只需要改动封装层而不需要改动大量业务文件。13.4 不要为“热门”而引入React 面试题里经常出现 “React 生态中你用过哪些库” 的问题但这不代表每个库都必须用上。一个只有 3 个页面、没有复杂共享状态的项目强行引入 Redux Toolkit 只会增加理解成本。引入新库之前先问自己三个问题这个库解决了我目前真实存在的痛点吗团队里有人熟悉这个库的维护方式吗如果不引入自己用 React 原生能力要多花多少成本如果答案不够明确宁可先用原生能力实现也不要急着上依赖。14. 总结与学习路线这篇文章从路由、状态、UI、数据请求、表单、动画、元框架、测试几个维度把 React 生态里的主流库梳理了一遍。如果你能跟着文章里的示例动手跑一遍你应该已经掌握了几件事React Router 如何配置路由、Redux Toolkit 和 Zustand 的核心用法、TanStack Query 如何简化请求状态、React Hook Form 如何处理表单、Next.js App Router 的基本约定以及测试工具链如何组合。如果你还想继续深入可以按下面的路线学习先精读 React 官方文档中关于状态管理、reconciliation 的原理知识选择一个库推荐先学 React Router 和 Zustand把它完整用在一个实际页面上然后尝试用 TanStack Query 重构一个包含请求的页面感受前后差异有精力的话用 Next.js 做一个带 SSR 的小项目最后给项目补上关键组件的测试。React 生态的更新速度很快但核心思想是稳定的组件化、单向数据流、确定性渲染、把复杂逻辑交给专门工具。掌握了这些基础就算未来出现新的库你也能快速上手。如果这篇文章对你有帮助不妨收藏备用如果你想补充其他 React 相关库的经验也欢迎在评论区一起交流。 React生态主流库全景梳理：从路由到测试的选型指南
当你的 React 项目从简单的 Demo 走向真实的中后台系统时一定会遇到一个现实问题单靠 React 本体已经不够用了。路由怎么切状态放哪接口请求怎么管理几十个表单怎么处理组件是自己写还是用现成的这些问题的背后几乎都有对应的一套成熟方案。本文称得上是一份“React 主流库全景梳理”我会把 React 生态里最常见的几类库逐个讲清楚它们解决什么问题、核心用法是什么、相互之间怎么选。内容会尽量保持“12 分钟能读完”的节奏每个库都会给出最小可运行的示例方便你对照理解。无论你是刚学完 React 基础准备做项目的同学还是有一定经验、想系统梳理生态选型的开发者这篇文章都值得收藏备用。1. 为什么要了解 React 主流库1.1 从一个业务项目说起假设你要开发一个后台管理系统左侧菜单、顶部栏、中间是包含表格和表单的内容区。这个系统需要跳转多个页面、共享登录用户信息、从接口拉取列表数据、提交表单、还要在不同页面之间传递参数。如果只用 React 本身来实现你会发现自己要重复处理很多麻烦事页面跳转和浏览器前进后退的对应关系要自己维护全局用户状态要通过逐层 props 传递改起来非常痛苦接口请求要自己封装 loading、error、缓存、重试逻辑表单校验要自己写状态和校验规则表格、弹窗、日期选择等通用组件要从零开发。这些问题不是 React 自己没有能力做而是每个项目都从零造一遍轮子成本太高。于是 React 生态里逐渐沉淀出了大量“主流库”路由有 React Router状态有 Redux 和 Zustand请求有 TanStack Query 和 SWRUI 有 Ant Design表单有 React Hook Form测试有 Vitest 和 React Testing Library。1.2 React 生态的核心分工React 更像是一个“乐高底座”它提供了组件化渲染的能力但把一个完整项目拼起来还需要很多积木块。下面是 React 生态里最常见的分工问题域代表库解决什么问题页面路由React Router、Next.js管理 URL 与页面组件的对应关系状态管理Redux Toolkit、Zustand、Jotai、MobX管理全局共享数据UI 组件Ant Design、Material UI、Vant、Arco Design提供开箱即用的组件数据请求TanStack Query、SWR简化接口请求、缓存、更新表单处理React Hook Form、Formik处理表单状态、校验、提交动画交互Framer Motion用声明式方式做动画元框架Next.js、Remix提供 SSR、约定式路由、构建等一体化能力测试Vitest、Jest、React Testing Library组件测试与单元测试掌握了这些库你的 React 开发效率会有一个质的提升。下面我们从环境准备开始把每一类库都过一遍。1.3 本文阅读方式如果你对某个库已经很熟悉可以直接跳到感兴趣的部分如果你是初学者建议按顺序读。文章中的代码示例尽量独立你可以复制到自己的项目里运行。需要注意的是React 生态更新速度较快文中的 API 以当前常见版本为例具体使用时要根据实际安装的版本调整。2. 环境准备与示例项目2.1 基础环境本文示例使用以下基础环境Node.js建议 18 或 20 及以上版本包管理器npm、pnpm 或 yarn 均可构建工具Vite它是目前 React 项目初始化最快的方式之一React 版本以 React 18 / React 19 环境为例文中的代码在两个版本下都可以运行。如果你本机还没有安装 Node.js请先到 Node.js 官网下载 LTS 版本。安装完成后在终端执行node -v和npm -v可以验证是否成功。2.2 创建 Vite 项目打开终端执行下面的命令创建一个 React TypeScript 项目npm create vitelatest react-ecosystem-demo -- --template react-ts创建完成后进入项目目录并安装依赖cd react-ecosystem-demo npm install启动项目npm run dev启动后浏览器访问终端输出的地址会看到 Vite React 的默认页面说明项目创建成功。2.3 安装后续示例需要的库在后面的章节中我们会陆续用到以下库。你可以按需安装不需要一次全部装完npm install react-router-dom npm install reduxjs/toolkit react-redux npm install zustand npm install antd npm install tanstack/react-query npm install swr npm install react-hook-form npm install framer-motion安装完成后我们开始逐个了解这些库。3. 路由方案React Router3.1 前端路由解决了什么在没有前端路由的年代页面跳转靠的是后端返回不同的 HTML 页面。前端路由出现后切换页面不再刷新整个网页而是由 JavaScript 监听 URL 变化再渲染对应的组件。这样做的好处是页面切换更快、交互更流畅也更符合单页应用SPA的体验。React Router 是 React 生态里使用最广泛的路由库。它提供了声明式的路由配置方式你只需要定义“什么路径显示什么组件”剩下的匹配逻辑由路由库处理。3.2 一个最小路由示例现在我们在src目录下创建页面组件然后配置路由。文件路径src/pages/Home.tsxexport default function Home() { return div首页/div; }文件路径src/pages/About.tsxexport default function About() { return div关于我们/div; }文件路径src/main.tsximport { createRoot } from react-dom/client; import { createBrowserRouter, RouterProvider } from react-router-dom; import Home from ./pages/Home; import About from ./pages/About; const router createBrowserRouter([ { path: /, element: Home /, }, { path: /about, element: About /, }, ]); createRoot(document.getElementById(root)!).render( RouterProvider router{router} / );这里使用了createBrowserRouter来创建路由实例再用RouterProvider渲染。path是浏览器地址栏中的路径element是对应要渲染的组件。3.3 常见路由场景实际开发中我们通常还会用到这几个 APILink用于页面跳转类似 HTML 的a标签useNavigate在事件处理函数中编程式跳转useParams获取路由参数例如/user/:id中的idOutlet渲染嵌套路由的子组件。下面是一个带导航栏和嵌套路由的示例import { Link, Outlet } from react-router-dom; export default function Layout() { return ( div nav Link to/首页/Link Link to/about关于/Link /nav Outlet / /div ); }这里需要提醒的是路由组件必须在路由上下文内部使用。如果你在组件里调用useNavigate时出现类似 “useNavigate may be used only in the context of a Router component” 的报错多半是因为组件没有放在路由容器中。4. 状态管理Redux Toolkit、Zustand、Jotai4.1 为什么需要状态管理库React 自带useState为什么还需要状态管理库因为当多个层级、多个页面需要共享同一份数据时useState会带来严重的 props 层层传递问题。例如登录用户信息、购物车数据、全局主题配置这些数据分布在很多组件中。如果每次修改都要在父组件里定义一个 state再通过 props 一层层往下传组件一多代码会非常难维护。状态管理库的作用是把共享数据集中管理任何组件都可以直接读取和修改不需要关心数据从哪个父组件来。4.2 Redux Toolkit 快速上手Redux 是 React 生态里老牌状态库现在官方推荐直接使用 Redux Toolkit简称 RTK它封装了大部分样板代码。先安装依赖npm install reduxjs/toolkit react-redux创建一个计数器 slice文件路径src/store/counterSlice.tsimport { createSlice } from reduxjs/toolkit; interface CounterState { value: number; } const initialState: CounterState { value: 0, }; const counterSlice createSlice({ name: counter, initialState, reducers: { increment: (state) { state.value 1; }, decrement: (state) { state.value - 1; }, }, }); export const { increment, decrement } counterSlice.actions; export default counterSlice.reducer;创建 store文件路径src/store/index.tsimport { configureStore } from reduxjs/toolkit; import counterReducer from ./counterSlice; export const store configureStore({ reducer: { counter: counterReducer, }, }); export type RootState ReturnTypetypeof store.getState; export type AppDispatch typeof store.dispatch;在入口文件提供 store文件路径src/main.tsximport { Provider } from react-redux; import { store } from ./store; // 在渲染组件的外层包裹 Provider Provider store{store} App / /Provider在组件中使用import { useDispatch, useSelector } from react-redux; import { increment, decrement } from ../store/counterSlice; import type { RootState } from ../store; export function Counter() { const count useSelector((state: RootState) state.counter.value); const dispatch useDispatch(); return ( div span{count}/span button onClick{() dispatch(increment())}1/button button onClick{() dispatch(decrement())}-1/button /div ); }这里需要注意的是RTK 内部使用了 Immer所以在 reducer 里可以直接修改 state 的写法不需要手动展开对象。4.3 Zustand 轻量方案Zustand 是一个比 Redux 更轻量的状态管理库它的特点是不需要 Provider 包裹API 也非常简洁。先安装npm install zustand创建 storeimport { create } from zustand; interface CounterStore { count: number; increase: () void; decrease: () void; } export const useCounterStore createCounterStore((set) ({ count: 0, increase: () set((state) ({ count: state.count 1 })), decrease: () set((state) ({ count: state.count - 1 })), }));组件中使用import { useCounterStore } from ../store/useCounterStore; export function Counter() { const count useCounterStore((state) state.count); const increase useCounterStore((state) state.increase); const decrease useCounterStore((state) state.decrease); return ( div span{count}/span button onClick{increase}1/button button onClick{decrease}-1/button /div ); }Zustand 的写法非常直观。它相比于 Redux 省去了 action、reducer、dispatch 等概念适合中小型项目使用。4.4 状态库怎么选如果项目不大、共享状态少Zustand 是性价比最高的选择如果项目团队已经熟悉 Redux 的编程模式或者需要严格的数据流控制Redux Toolkit 依然是稳定的方案Jotai 适合粒度更细的原子状态管理和 Zustand 类似也是轻量路线适合喜欢更细拆分状态的团队MobX 的特点是响应式编程如果你习惯 Vue 那种自动追踪依赖的写法可以关注 MobX。这里想提醒一句状态管理库只是工具不要为了“热门”而引入。很多场景下React 自带的 context 配合useReducer已经够用。5. UI 组件库Ant Design 与多端选择5.1 组件库的价值中后台项目里页面上的表格、表单、弹窗、按钮、日期选择器样式和交互都是高度相似的。如果每个项目都从零实现不仅开发效率低设计规范也很难统一。组件库把这些通用能力沉淀下来开箱即用。React 生态里的组件库非常多国内团队最熟悉的多半是 Ant Design它由蚂蚁集团开源是 React 生态里覆盖度最全的组件库之一。5.2 用 Ant Design 搭建一个页面先安装npm install antdAnt Design 5.x 推荐在入口文件使用 ConfigProvider可以统一配置语言、主题等。文件路径src/main.tsximport { ConfigProvider } from antd; import zhCN from antd/locale/zh_CN; ConfigProvider locale{zhCN} App / /ConfigProvider在页面中使用组件import { Button, DatePicker, Table, message } from antd; import type { ColumnsType } from antd/es/table; interface User { id: number; name: string; age: number; } const columns: ColumnsTypeUser [ { title: 姓名, dataIndex: name }, { title: 年龄, dataIndex: age }, ]; const data: User[] [ { id: 1, name: 张三, age: 28 }, { id: 2, name: 李四, age: 32 }, ]; export function UserTable() { const handleCreate () { message.success(创建成功); }; return ( div Button typeprimary onClick{handleCreate} 新建用户 /Button DatePicker style{{ marginLeft: 16 }} / Table rowKeyid columns{columns} dataSource{data} / /div ); }从上面的代码可以看出组件库把表格的列定义、数据源、按钮样式都封装好了我们只需要关心业务数据。5.3 中后台与 C 端组件库对比中后台管理系统Ant Design、Arco Design、TDesign 都是不错的选择它们对表格、表单、权限布局的支持非常成熟C 端页面/移动端 H5可以选择 Vant、NutUI 等移动端组件库国际化产品Material UIMUI在海外团队中使用广泛无头组件库Headless UI、Radix UI 只提供交互逻辑和可访问性不提供样式适合需要定制视觉风格的项目。组件库不是越重越好。如果你们的视觉风格高度定制选择一个“轻样式”的无头组件库会比强行覆盖 Ant Design 的样式更省力。6. 数据请求TanStack Query 与 SWR6.1 手动请求的痛点很多 React 开发者最初的请求写法是useEffectfetchconst [data, setData] useState([]); const [loading, setLoading] useState(true); useEffect(() { fetch(/api/list) .then((res) res.json()) .then((data) { setData(data); setLoading(false); }); }, []);这种写法的缺点在于loading、error、success 状态需要手工管理多个组件请求同一接口会重复发送离开页面后响应回来还可能造成内存泄漏警告。TanStack Query原名 React Query和 SWR 就是来解决这些问题的。6.2 用 useQuery 接管异步状态先安装npm install tanstack/react-query在入口配置 QueryClientProviderimport { QueryClient, QueryClientProvider } from tanstack/react-query; const queryClient new QueryClient(); QueryClientProvider client{queryClient} App / /QueryClientProvider在组件中使用import { useQuery } from tanstack/react-query; interface User { id: number; name: string; } async function fetchUsers(): PromiseUser[] { const res await fetch(/api/users); if (!res.ok) { throw new Error(请求失败); } return res.json(); } export function UserList() { const { data, isLoading, isError, error } useQuery({ queryKey: [users], queryFn: fetchUsers, }); if (isLoading) { return div加载中.../div; } if (isError) { return div加载失败{error.message}/div; } return ( ul {data?.map((user) ( li key{user.id}{user.name}/li ))} /ul ); }queryKey是缓存的身份标识queryFn是请求函数。TanStack Query 会自动缓存数据在组件重新挂载时优先读取缓存并在后台重新校验数据是否过期。它还提供了refetch、invalidateQueries、prefetch等 API适合复杂的数据同步场景。6.3 TanStack Query 与 SWR 对比SWR 是 Vercel 团队出品的数据请求库名称来自 HTTP 的 stale-while-revalidate 缓存策略使用方式同样简洁import useSWR from swr; const fetcher (url: string) fetch(url).then((res) res.json()); export function UserList() { const { data, error, isLoading } useSWR(/api/users, fetcher); if (isLoading) return div加载中.../div; if (error) return div加载失败/div; return ul{data?.map((user: any) li key{user.id}{user.name}/li)}/ul; }两者的核心思路非常相似。如果项目已经使用了 React Query 的缓存机制继续使用即可如果喜欢更轻的 APISWR 也是很好的选择。个人建议新项目里优先考虑 TanStack Query它的 TypeScript 支持和 API 完整性会更好一些。7. 表单处理React Hook Form7.1 表单在 React 中的痛点中后台项目里表单是最常见的页面类型但表单的状态处理非常繁琐每个输入框都要绑定 value监听 onChange还要维护错误信息。字段一多组件会充满大量重复的状态代码。React Hook Form 通过自定义 Hook 注册表单字段用“非受控”方式减少重新渲染的次数并且内置了校验、错误提示、提交处理等能力。7.2 最小示例先安装npm install react-hook-form下面是一个带必填校验的登录表单import { useForm, SubmitHandler } from react-hook-form; interface LoginForm { username: string; password: string; } export function LoginPage() { const { register, handleSubmit, formState: { errors }, } useFormLoginForm(); const onSubmit: SubmitHandlerLoginForm (data) { console.log(提交的数据, data); }; return ( form onSubmit{handleSubmit(onSubmit)} div input placeholder用户名 {...register(username, { required: 用户名不能为空 })} / {errors.username p{errors.username.message}/p} /div div input typepassword placeholder密码 {...register(password, { required: 密码不能为空, minLength: { value: 6, message: 密码至少6位 }, })} / {errors.password p{errors.password.message}/p} /div button typesubmit登录/button /form ); }register返回一组属性onChange、onBlur、name等展开到输入框上即可。校验规则写在register的第二个参数里提交时只有通过全部校验才会触发onSubmit。7.3 与组件库组合使用React Hook Form 经常和 Ant Design 这类组件库组合。需要注意的是Ant Design 的表单组件是“受控组件”需要用到Controller来做适配import { Controller, useForm } from react-hook-form; import { Input, Button } from antd; export function AntdForm() { const { control, handleSubmit } useForm{ username: string }(); return ( form onSubmit{handleSubmit((data) { console.log(data); })} Controller nameusername control{control} rules{{ required: 请输入用户名 }} render{({ field }) Input {...field} placeholder用户名 /} / Button htmlTypesubmit typeprimary 提交 /Button /form ); }初学者最容易在这里踩坑直接用register去绑 AntD 的Input结果发现输入框无法输入。原因是 AntD 的组件需要value和onChange受控而Controller正好负责把这两者连接起来。8. 动画方案Framer Motion8.1 React 动画方案有哪几类React 里做动画主要有三类方式CSS 过渡和动画最简单但对于复杂交互动效控制起来很麻烦动画库Framer Motion、React Spring把动画抽象成声明式 API页面切换动画可以配合路由懒加载和动画库实现。Framer Motion 是 React 生态里比较受欢迎的动画库它提供了motion组件配合initial初始状态和animate目标状态就能完成动画。8.2 最小动画示例先安装npm install framer-motion示例一个按钮点击后让方块移动和旋转import { motion } from framer-motion; export function AnimatedBox() { return ( motion.div style{{ width: 100, height: 100, backgroundColor: #1677ff }} initial{{ opacity: 0, x: -100 }} animate{{ opacity: 1, x: 0 }} transition{{ duration: 0.5 }} whileHover{{ scale: 1.1 }} whileTap{{ scale: 0.95 }} / ); }motion.div是 Framer Motion 提供的动画组件initial定义动画开始时的样式animate定义结束样式transition控制时长和缓动函数。whileHover和whileTap则分别对应鼠标悬停和点击效果。8.3 生产建议动画在实际项目中要克制使用。页面级动画、弹窗出现动画、列表增删动画这些对体验提升明显但装饰性动画过多会拖慢页面也容易让用户感到疲劳。建议先完成无动画的完整功能再逐步加交互反馈。9. SSR 元框架Next.js 与 Remix9.1 为什么需要元框架纯 Vite React 的 SPA 在首屏渲染时浏览器拿到的是空 HTML所有内容都要靠 JavaScript 渲染。这会带来两个问题首屏加载较慢且搜索引擎对内容索引不友好。于是出现了“元框架”它们在 React 之上提供了服务端渲染SSR、静态生成SSG、文件路由、加载优化等能力。Next.js 是目前最主流的 React 元框架社区生态强大Vercel 也在持续维护。9.2 Next.js App Router 核心概念现代 Next.js 推荐使用 App Router目录结构如下app/ layout.tsx page.tsx about/ page.tsxlayout.tsx定义全局布局page.tsx对应路由页面。在 App Router 中组件默认是 Server Component服务端组件只有文件顶部添加use client才会变成 Client Component客户端组件这时才能使用useState、useEffect等浏览器 API。一个最简单的页面文件路径app/page.tsxexport default function Home() { return ( main h1Hello Next.js/h1 /main ); }如果你需要交互就添加use clientuse client; import { useState } from react; export default function Counter() { const [count, setCount] useState(0); return ( button onClick{() setCount(count 1)}点击次数{count}/button ); }新手容易遇到的问题是把useState写在没有use client的组件里导致构建报错。9.3 什么时候选元框架需要 SEO 优化的内容型网站建议选 Next.js团队希望把前端和后端逻辑写在一起用 API Routes 或 Server Actions元框架很有价值如果只是内部后台管理系统对 SEO 没有要求那么 Vite React 仍然更简单。选择元框架意味着引入更多约定学习成本会更高。请根据自己的项目需求决定不要盲目追新。10. 测试工具链Vitest 与 React Testing Library10.1 前端测试的组成前端测试通常分为三层单元测试测试不含 UI 的业务逻辑组件测试渲染组件并验证交互行为端到端测试E2E模拟真实用户操作完整流程。React 技术栈里最常用的组合是 Vitest 或 Jest 作为测试运行器配合 React Testing Library 来模拟组件渲染和用户交互。10.2 基础组件测试先安装测试依赖npm install -D vitest testing-library/react testing-library/jest-dom testing-library/user-event jsdom在vite.config.ts中配置测试环境import { defineConfig } from vite; import react from vitejs/plugin-react; export default defineConfig({ plugins: [react()], test: { environment: jsdom, }, });测试一个简单的计数组件文件路径src/components/Counter.test.tsximport { describe, it, expect } from vitest; import { render, screen } from testing-library/react; import userEvent from testing-library/user-event; import { Counter } from ./Counter; describe(Counter, () { it(点击按钮后计数增加, async () { render(Counter /); const button screen.getByRole(button, { name: /点击次数/ }); await userEvent.click(button); expect(screen.getByText(点击次数1)).toBeDefined(); }); });这里使用render渲染组件screen.getByRole查找元素userEvent.click模拟用户点击最后用expect断言界面变化。10.3 测试优先级对于很多小团队而言不必追求每个组件都有完整测试。更实际的做法是核心业务逻辑一定要测涉及表单、权限判断等关键交互的组件要测纯展示型组件可以少测或不测复杂流程用 E2E 工具覆盖比写大量组件测试更划算。测试是为了保证重构安全不是为了凑覆盖率。11. 常见问题与排查思路11.1 高频报错对照表React 生态里每个库都有自己容易踩的坑下面整理一些常见问题问题现象常见原因解决思路路由跳转后页面空白路由配置路径错误或组件未导出检查path和element是否正确useNavigate 报错组件不在 Router 上下文内确保组件被 RouterProvider 包裹Redux 状态更新了但界面不变selector 选择范围过大或返回新引用检查 selector必要时 useShallowReact Query 报 “No QueryClient set”忘记包裹 QueryClientProvider在根部添加 ProviderAntD Input 无法输入与 React Hook Form 直接用 register 绑定改用 ControllerNext.js 使用 useState 报错Server Component 中使用了客户端 API添加use client组件库样式不生效未引入样式文件或按需加载配置不对检查 import 和构建配置11.2 典型排查流程遇到报错时不建议直接复制搜索引擎的结果而是先按下面的顺序排查看清报错信息中的文件名和行号检查依赖是否安装完整版本是否与示例一致检查组件是否被正确的 Provider 包裹查看控制台完整报错堆栈关注第一个报错位置使用最小复现方式删掉业务代码保留最简结构验证确认问题后再回到业务代码中逐段对照。多数 React 生态报错的核心都不是语法难而是“上下文缺失”或“版本不兼容”。11.3 版本兼容注意点React 生态更新很快尤其是 React 19 发布后部分第三方库升级需要时间。安装依赖时要注意查看包的peerDependencies是否支持当前的 React 版本升级大版本前先看官方升级指南和 breaking changes遇到兼容问题优先查阅 GitHub Issues而不是盲目降低依赖版本。12. 主流库选型建议12.1 按项目规模选型不同规模的项目适合的技术组合不同。小型项目 / 个人项目Vite React Router Zustand Ant Design React Hook Form中小型中后台Vite React Router Zustand/Redux Toolkit TanStack Query Ant Design Vitest需要 SEO 或 SSR 的场景Next.jsApp Router Zustand TanStack Query Ant Design Vitest移动端 H5Vite React Zustand Vant React Router12.2 组合示例省市数据联动小页面把上面几个库组合起来做一个常见的小功能选择省然后联动加载市列表。这里重点展示 React Hook Form、Ant Design 和 TanStack Query 的分工。use client; import { Controller, useForm } from react-hook-form; import { Select } from antd; import { useQuery } from tanstack/react-query; interface Province { code: string; name: string; } interface City { code: string; name: string; } // 这里用模拟数据代替真实接口 const provinces: Province[] [ { code: 110000, name: 北京市 }, { code: 440000, name: 广东省 }, ]; const cityMap: Recordstring, City[] { 110000: [{ code: 110100, name: 北京市 }], 440000: [ { code: 440100, name: 广州市 }, { code: 440300, name: 深圳市 }, ], }; async function fetchCities(provinceCode: string): PromiseCity[] { return Promise.resolve(cityMap[provinceCode] ?? []); } export function LocationSelect() { const { control, watch } useForm{ province: string; city: string }({ defaultValues: { province: undefined, city: undefined }, }); const province watch(province); const { data: cities [], isLoading } useQuery({ queryKey: [cities, province], queryFn: () fetchCities(province), enabled: Boolean(province), }); return ( Controller nameprovince control{control} render{({ field }) ( Select {...field} placeholder请选择省份 style{{ width: 200 }} options{provinces.map((p) ({ label: p.name, value: p.code }))} / )} / Controller namecity control{control} render{({ field }) ( Select {...field} placeholder请选择城市 style{{ width: 200 }} loading{isLoading} disabled{!province} options{cities.map((c) ({ label: c.name, value: c.code }))} / )} / / ); }这个案例是搜索热词里“省市查询组件”一类需求的典型实现思路。注意useQuery的enabled参数没有选择省份时不会发城市请求选择了省份后queryKey变化触发重新请求。12.3 选型原则选型时不要只看“哪个库 star 多”还要考虑团队熟悉度、项目规模和长期维护能力。优先选择官方维护活跃、文档完善的库同时尽量控制库的数量避免项目依赖膨胀。13. 最佳实践与工程建议13.1 依赖锁定与升级策略生产项目应当提交package-lock.json、pnpm-lock.yaml或yarn.lock保证不同开发环境下依赖版本一致。需要升级库时尽量避免直接执行npm install xxxlatest而是先查看 release notes评估 breaking changes 后再升级。13.2 按需加载与代码分割大型 React 项目要关注包体积。可以使用 React Router 的路由懒加载把页面拆分到不同 chunkconst Home lazy(() import(../pages/Home)); const About lazy(() import(../pages/About));组件库方面Ant Design 5.x 默认支持 tree-shaking配合 Vite 等现代构建工具只需按需引入组件即可。对于体积较大的图表库、富文本编辑器尽量在用到时才动态加载。13.3 组件库与业务解耦不要在整个业务代码里到处直接import { Button } from antd。可以在项目里封装一层基础组件层例如// src/components/AppButton.tsx import { Button } from antd; import type { ButtonProps } from antd; export function AppButton(props: ButtonProps) { return Button {...props} /; }这样做的好处是未来如果从 Ant Design 迁移到其他组件库只需要改动封装层而不需要改动大量业务文件。13.4 不要为“热门”而引入React 面试题里经常出现 “React 生态中你用过哪些库” 的问题但这不代表每个库都必须用上。一个只有 3 个页面、没有复杂共享状态的项目强行引入 Redux Toolkit 只会增加理解成本。引入新库之前先问自己三个问题这个库解决了我目前真实存在的痛点吗团队里有人熟悉这个库的维护方式吗如果不引入自己用 React 原生能力要多花多少成本如果答案不够明确宁可先用原生能力实现也不要急着上依赖。14. 总结与学习路线这篇文章从路由、状态、UI、数据请求、表单、动画、元框架、测试几个维度把 React 生态里的主流库梳理了一遍。如果你能跟着文章里的示例动手跑一遍你应该已经掌握了几件事React Router 如何配置路由、Redux Toolkit 和 Zustand 的核心用法、TanStack Query 如何简化请求状态、React Hook Form 如何处理表单、Next.js App Router 的基本约定以及测试工具链如何组合。如果你还想继续深入可以按下面的路线学习先精读 React 官方文档中关于状态管理、reconciliation 的原理知识选择一个库推荐先学 React Router 和 Zustand把它完整用在一个实际页面上然后尝试用 TanStack Query 重构一个包含请求的页面感受前后差异有精力的话用 Next.js 做一个带 SSR 的小项目最后给项目补上关键组件的测试。React 生态的更新速度很快但核心思想是稳定的组件化、单向数据流、确定性渲染、把复杂逻辑交给专门工具。掌握了这些基础就算未来出现新的库你也能快速上手。如果这篇文章对你有帮助不妨收藏备用如果你想补充其他 React 相关库的经验也欢迎在评论区一起交流。