ahooks介绍

半兽人 发表于: 2025-05-07   最后更新时间: 2025-05-07 11:45:28  
{{totalSubscript}} 订阅, 67 游览

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、性能优化、浏览器特性等。

更新于 2025-05-07
在线,3小时前登录

查看React更多相关的文章或提一个关于React的问题,也可以与我们一起分享文章