WHAT - ahooks vs swr 请求
文章目录
- ahooks
- 特点
- 常用 Hooks 示例
- 1. useRequest — 封装网络请求逻辑（比 SWR / React Query 更轻量）
- 2. useDebounce — 防抖值
- 3. useLocalStorageState — 本地存储的状态
- 4. useBoolean — 快速管理布尔状态
- 5. useEventListener — 添加事件监听
- ahooks useRequest vs swr
- 核心区别概览
- 使用场景建议
- 使用 ahooks
- 使用 SWR
- 项目中二者能否共存？
ahooks
ahooks 是由阿里巴巴团队推出的一个 React Hooks 库，提供了大量经过封装的、可复用的 Hooks，旨在提高 React 开发效率。它基于 react-hooks 的设计理念，提供了更丰富、实用的功能集合。
特点
- 丰富：提供了网络请求、状态管理、事件监听、DOM 操作等多个领域的 Hooks。
- 高性能：部分 Hooks 内部做了节流、防抖、缓存等性能优化。
- 易用性强：API 简洁、文档完善，支持 TypeScript。
- 适配 SSR、React Native。
常用 Hooks 示例
1. useRequest — 封装网络请求逻辑（比 SWR / React Query 更轻量）
import { useRequest } from 'ahooks';const { data, error, loading } = useRequest(() => fetch('/api/user').then(res => res.json()));
2. useDebounce — 防抖值
const debouncedValue = useDebounce(searchValue, { wait: 500 });
3. useLocalStorageState — 本地存储的状态
const [value, setValue] = useLocalStorageState('key', { defaultValue: 'hello' });
4. useBoolean — 快速管理布尔状态
const [state, { setTrue, setFalse, toggle }] = useBoolean();
5. useEventListener — 添加事件监听
useEventListener('resize', () => {console.log('window resized');
}, { target: window });
ahooks useRequest vs swr
在 WHAT - React 请求方案之 SWR（stale-while-revalidate） 我们已介绍过 swr 请求方案。
这里主要介绍 ahooks useRequest 及其与 swr 的差别。
ahooks 和 SWR 都是 React 生态中非常流行的工具库，但它们的关注点不同：
核心区别概览
| 特性 | ahooks | SWR |
|---|---|---|
| 定位 | 多功能 React Hooks 工具库（全场景） | 专注于数据获取（HTTP 请求）的状态管理工具 |
| 主要功能 | 网络请求、状态管理、DOM 操作、生命周期处理等 | 高效、缓存优先的数据请求处理（远程请求） |
| 数据请求功能 | useRequest 提供类似 SWR 的功能 | 核心就是数据请求（远强于 ahooks 的请求功能） |
| 缓存/自动刷新等 | 支持（useRequest 内部封装了缓存/轮询/防抖等） | 更深入：全局缓存、自动刷新、revalidate 等机制 |
| SSR 支持 | 部分支持 | 内建良好支持 |
| 学习成本 | 低（各种功能按需用） | 中等（主打请求管理，但可配置项较多） |
| 体积/依赖性 | 全能型库，较大 | 单一职责，体积更小 |
使用场景建议
使用 ahooks
- 需要使用多种 Hook 功能（如节流、防抖、本地存储、倒计时等）；
- 想快速集成数据请求 + 其他功能；
- 你更偏好一个多合一的工具库；
- 项目不太依赖复杂的数据缓存场景。
使用 SWR
- 项目主要依赖数据请求管理；
- 需要高级功能：缓存同步、自动刷新、预取、分页、离线支持；
- 和 Next.js 搭配 SSR 用；
- 想对数据请求有更精细的控制（如乐观更新、mutate 等）；
项目中二者能否共存？
可以，常见用法是：
- 用
ahooks管理本地状态、事件处理、实用工具等； - 用
SWR专注处理远程数据请求和缓存管理；