本附录梳理了 React 开发中最常用的 Hooks 以及高频第三方库，方便快速查阅和选型。掌握这些基础能力，能覆盖 90% 以上的日常业务场景。
B.1 React 核心 Hooks 速查表
基础 Hooks
| Hook | 作用 | 典型用法 / 注意点 |
|------|------|-------------------|
| useState | 在函数组件中声明状态 | const [value, setValue] = useState(initialState)；支持函数式更新以规避闭包陷阱：setCount(c => c + 1) |
| useEffect | 处理副作用（请求、订阅、DOM 操作） | useEffect(() => { ... return cleanup }, [deps])；依赖数组控制执行时机，为空则仅挂载/卸载时执行 |
| useRef | 保存跨渲染周期的可变引用（DOM 节点、实例、任意值） | const ref = useRef(null); ref.current = ...；修改 ref.current 不会触发重渲染 |
| useContext | 消费 Context 值 | const theme = useContext(ThemeContext)；避免 Provider 值频繁变化导致不必要的重渲染 |
性能优化 Hooks
| Hook | 作用 | 典型用法 / 注意点 |
|------|------|-------------------|
| useMemo | 缓存计算结果，依赖不变则返回上次结果 | const sorted = useMemo(() => expensiveSort(data), [data])；避免不必要的重复计算 |
| useCallback | 缓存函数引用，避免子组件因函数重建而重渲染 | const handleClick = useCallback(() => { ... }, [dep])；通常搭配 React.memo 使用 |
| React.memo | 对组件进行浅比较，props 不变则跳过渲染 | export default React.memo(MyComponent)；不是 Hook，但属于常用优化手段 |
进阶 Hooks
| Hook | 作用 | 典型用法 / 注意点 |
|------|------|-------------------|
| useReducer | 复杂状态管理（多状态联动或有明确状态流转逻辑） | const [state, dispatch] = useReducer(reducer, initialState)；适合表单、购物车等场景 |
| useLayoutEffect | 作用与 useEffect 相同，但在 DOM 更新后、浏览器绘制前同步执行 | 用于读取 DOM 布局并同步重渲染，避免闪烁；慎用，多数情况 useEffect 足够 |
| useImperativeHandle | 暴露自定义方法给父组件（配合 forwardRef） | useImperativeHandle(ref, () => ({ focus, reset }))；封装命令式逻辑，但建议优先用 Props 驱动 |
| useId | 生成唯一 ID，可用于无障碍属性的关联 | const id = useId()；React 18 新增，避免硬编码 |
React 18+ 并发相关 Hooks
| Hook | 作用 | 典型用法 / 注意点 |
|------|------|-------------------|
| useTransition | 标记非紧急更新，保持 UI 交互响应 | const [isPending, startTransition] = useTransition(); startTransition(() => setQuery(input)) |
| useDeferredValue | 延迟某个值的更新，优先渲染紧急内容 | const deferredValue = useDeferredValue(input)；常用于搜索建议等场景 |
React 19 新增 / 变化 Hooks（速览）
| Hook / API | 作用 | 备注 |
|-----------|------|------|
| use() | 在渲染期间消费 Promise 或 Context，支持挂起（Suspense） | 用于简化数据获取组件写法，有望替代部分 useEffect 请求模式 |
| useActionState | 管理表单提交状态（pending、error） | 与 Server Actions 紧密配合 |
| useFormStatus | 在表单内读取提交状态 | 更方便的按钮 loading 处理 |
| useOptimistic | 实现乐观更新 | 提交数据时立即更新 UI，后续根据结果回滚 |
使用规则提醒：所有 Hooks 必须在函数组件或自定义 Hook 顶层调用，不能放在条件、循环或 return 之后；自定义 Hook 命名以
use开头。
B.2 常用第三方工具库速查表
路由管理
| 库 | 简介 | 当前推荐版本 |
|----|------|------------|
| React Router | React 官方推荐路由，支持声明式路由、嵌套路由、数据路由（Loader/Action） | v6.x（当前稳定版），v7 可选（引入 Remix 融合能力） |
状态管理
| 库 | 特点 | 适用场景 |
|----|------|---------|
| Zustand | 极简 API、无 Provider、基于 Hook、性能好 | 中小型应用，快速起手 |
| Jotai | 原子化状态，与 React 状态模型接近，按需渲染 | 需要细粒度状态共享，避免不必要的重渲染 |
| Redux Toolkit (RTK) | 官方推荐的 Redux 写法，内置 immer、reselect、thunk，一致性好 | 大型应用，状态逻辑复杂，需要中间件、DevTools 强支持 |
| Recoil | Meta 出品原子化状态库，派生状态优雅 | 社区使用量相对下降，待 React 官方方案（如 use）成熟后评估迁移 |
| MobX | 响应式状态管理，可变数据哲学 | 偏好 OOP 风格的团队，愿意偏离不可变数据流 |
数据请求与缓存
| 库 | 核心能力 | 推荐理由 |
|----|--------|---------|
| TanStack Query（原 React Query） | 数据缓存、自动重取、乐观更新、分页/无限滚动、后台同步 | 已成为 React 数据请求的事实标准 |
| SWR | 与 TanStack Query 类似，由 Vercel 推出 | 较轻量，适合 Next.js 或对 Vercel 生态依赖较强的项目 |
| Axios | HTTP 请求库，提供请求/响应拦截、取消请求等 | 与上述缓存库配合使用，封装请求实例 |
| ky | 基于 Fetch API 的小型 HTTP 库 | 对体积敏感时可替代 Axios |
表单处理
| 库 | 核心思路 | 优势 |
|----|---------|------|
| React Hook Form | 非受控模式为主，通过注册机制最小化重渲染 | 性能极好，代码量少，支持 Yup / Zod 校验 |
| Formik | 受控组件驱动，声明式字段管理 | 社区成熟，学习曲线缓和，适合中小型表单 |
| TanStack Form | 正快速迭代的轻量表单库，类似 TanStack Query 生态 | 未来潜力，当前可观望 |
样式方案
| 分类 | 库 / 方案 | 适用场景 |
|------|----------|---------|
| 原子化 CSS | Tailwind CSS | 优先推荐，快速出活，配合 VSCode 插件生产效率极高 |
| CSS-in-JS | styled-components | 组件级样式封装，适合需要动态样式绑定的场景 |
| CSS-in-JS（高性能） | Emotion | 与 styled-components 类似，包体积更小 |
| CSS Modules | 原生支持，无需额外库 | 稳定方案，样式隔离简单可靠 |
| 零运行时 CSS-in-JS | Vanilla Extract / Panda CSS | 静态提取样式，零运行时开销，适合性能敏感项目 |
测试工具
| 工具 | 用途 |
|------|------|
| Jest | 单元测试运行器，内置断言、mock、快照 |
| React Testing Library (RTL) | 以用户行为为中心的组件测试，鼓励测试 DOM 语义而非实现细节 |
| Vitest | 与 Vite 集成的测试运行器，速度更快，兼容 Jest API |
| Cypress | E2E 测试，可以在浏览器中运行真实交互 |
| Playwright | 微软开源的跨浏览器 E2E 测试工具，支持 Chrome、Firefox、Safari |
常用工具与组件库
| 库 | 说明 |
|----|------|
| date-fns / dayjs | 轻量日期处理库，替代 moment.js |
| lodash / lodash-es | 工具函数集合，按需引入（debounce、throttle、cloneDeep 等） |
| immer | 不可变数据更新，让“直接修改”产生新对象，Redux Toolkit 内部已集成 |
| react-window / react-virtualized | 虚拟列表，高效渲染长列表 |
| dnd-kit / react-beautiful-dnd | 拖拽排序库（react-beautiful-dnd 已停止维护，建议用 dnd-kit） |
| react-helmet-async | 管理 <head> 标签内容，SEO 友好 |
| react-toastify / sonner | 轻量 toast 通知组件 |
UI 组件库（常用设计体系）
| 组件库 | 风格 |
|--------|------|
| Ant Design | 国产生态最成熟，特别适合后台管理系统 |
| Material UI (MUI) | Google Material Design 风格，定制性强 |
| Chakra UI | 原子化组合，开发体验优秀，适合快速开发 |
| shadcn/ui | 基于 Radix UI + Tailwind，提供可复制的组件源码，自定义程度极高 |
| Headless UI | 完全无样式的行为组件，搭配 Tailwind 使用 |
使用建议：不必一次性全部掌握，根据实际项目痛点逐步深入。优先熟练 React 内置 Hooks，再根据场景补充第三方库。大多数项目标配组合为：React Router + Zustand/TanStack Query + React Hook Form + Tailwind CSS + Vitest/RTL，足以支撑现代 Web 应用开发。