ahooks
是由蚂蚁开发和维护的一个 高质量 React Hooks 库,专注于提高 React 开发效率。
它封装了大量实用的 Hooks,让你在项目中能少写重复逻辑代码,例如节流、防抖、请求状态管理、轮询、全屏、剪贴板、异步控制等。
ahooks
是什么
- 一套基于 React Hooks API 的 工具函数集合。
- 提供了超过 100 个实用 hooks。
- 完全用 TypeScript 写成,类型完备。
- 支持 SSR / Next.js。
- 核心理念是:“逻辑复用、极致精简”。
安装方法
npm install ahooks
或:
yarn add ahooks
常见用法示例
1. useRequest
:封装请求逻辑(非常强大)
import { useRequest } from 'ahooks'
function fetchUser() {
return fetch('/api/user').then(res => res.json())
}
const MyComponent = () => {
const { data, loading, error } = useRequest(fetchUser)
if (loading) return <p>加载中...</p>
if (error) return <p>出错了</p>
return <div>用户名:{data.name}</div>
}
支持:
- 自动请求
- 手动触发
- 防抖/节流
- 缓存
- 轮询
- 分页/加载更多
- 依赖更新自动刷新
2. useDebounceFn
:函数防抖(输入框防抖请求)
import { useDebounceFn } from 'ahooks'
const { run } = useDebounceFn((value) => {
console.log('搜索:', value)
}, { wait: 500 })
<input onChange={e => run(e.target.value)} />
3. useInterval
:定时器封装
import { useInterval } from 'ahooks'
useInterval(() => {
console.log('每秒执行一次')
}, 1000)
4. useLocalStorageState
:用 Hook 管本地存储
import { useLocalStorageState } from 'ahooks'
const [name, setName] = useLocalStorageState('name', { defaultValue: '访客' })
<input value={name} onChange={e => setName(e.target.value)} />
5. useBoolean
:简化布尔值状态操作
import { useBoolean } from 'ahooks'
const [visible, { setTrue, setFalse, toggle }] = useBoolean()
<button onClick={toggle}>切换</button>
{visible && <p>内容展示中</p>}
适合使用 ahooks 的场景:
场景 | 是否推荐用 ahooks |
理由 |
---|---|---|
网络请求(带 loading、错误处理、轮询、分页等) | ✅ 强烈推荐 | useRequest 一行代码搞定很多复杂逻辑 |
频繁用的状态管理(boolean、数字、set/map) | ✅ 推荐 | 比如 useBoolean /useCounter /useSet 简洁 |
输入框搜索节流/防抖 | ✅ 推荐 | useDebounceFn 简洁、抽象好 |
节流、定时器、副作用管理 | ✅ 推荐 | useThrottleFn /useInterval 封装更好 |
简单的本地状态管理(useState) | ❌ 不需要 | 原生就够了 |
非 React 项目或只用一次的场景 | ❌ 不必要 | 用原生 Hook 更直观 |
对比案例:请求 + 防抖 + loading 管理
原生写法(复杂)
const [value, setValue] = useState('')
const [data, setData] = useState(null)
const [loading, setLoading] = useState(false)
const debounceValue = useDebounce(value, 500) // 你得手写这个 Hook
useEffect(() => {
setLoading(true)
fetch(`/api/search?q=${debounceValue}`)
.then(res => res.json())
.then(data => setData(data))
.finally(() => setLoading(false))
}, [debounceValue])
ahooks 写法(优雅)
const { data, loading } = useRequest(
(q) => fetch(`/api/search?q=${q}`).then(res => res.json()),
{
debounceWait: 500,
refreshDeps: [value],
}
)
对比案例:布尔状态切换
原生写法
const [visible, setVisible] = useState(false)
const toggle = () => setVisible(v => !v)
ahooks 写法
const [visible, { toggle }] = useBoolean(false)
对比案例:定时器
原生写法(容易忘清除)
useEffect(() => {
const timer = setInterval(() => {
console.log('tick')
}, 1000)
return () => clearInterval(timer)
}, [])
ahooks 写法(自动清除)
useInterval(() => {
console.log('tick')
}, 1000)
官方文档地址
https://ahooks.js.org/
可以根据分类快速查找需要的 Hook,比如网络请求、状态、UI、性能优化、浏览器特性等。