ahooks介绍修订版本明细

源

采纳

编辑于 4月前

半兽人

ahooks介绍

React
高级组件

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

预览