手机网站设计手机壳尺寸一览表网站建设推广方案

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 专注处理远程数据请求和缓存管理；