ahooks

Ahooks React Hooks 库

此技能全面介绍 ahooks React hooks 库，涵盖全部 76+ 个 hook，并提供详细文档、示例和最佳实践。

快速开始

基本用法

import { useRequest, useMount, useSetState } from 'ahooks';

const MyComponent = () => {
  const { data, loading, error } = useRequest('/api/data');
  const [state, setState] = useSetState({ count: 0 });

  useMount(() => {
    console.log('Component mounted');
  });

  return <div>{data}</div>;
};

常见模式

• 状态管理：使用 useSetState、useToggle、useBoolean 管理复杂状态
• 数据获取：使用 useRequest 发起 API 调用，支持缓存、重试和轮询
• 性能优化：使用 useDebounce、useThrottle 进行优化
• 生命周期：使用 useMount、useUnmount、useUpdateEffect 管理组件生命周期

Hook 分类

此技能将 hook 分为 9 个主要类别：

📊 状态管理（12 个 hook）

用于处理复杂状态的状态工具。 参见： state-hooks.md

🔄 生命周期副作用（9 个 hook）

组件生命周期和副作用管理。 参见： effect-hooks.md

🌐 数据获取（6 个 hook）

API 调用、分页、无限滚动和数据缓存。 参见： request-hooks.md

⚡ 性能优化（9 个 hook）

防抖、节流、记忆化和 RAF 优化。 参见： performance-hooks.md

🎨 DOM 与 UI（12 个 hook）

事件监听器、尺寸、滚动和 UI 交互。 参见： dom-hooks.md

💾 存储（4 个 hook）

本地存储、会话存储、Cookie 和 URL 状态。 参见： dom-hooks.md

🌍 浏览器 API（8 个 hook）

网络状态、可见性、键盘事件和浏览器功能。 参见： dom-hooks.md

⏰ 计时器（4 个 hook）

间隔、超时和倒计时工具。 参见： advanced-hooks.md

🚀 高级工具（12 个 hook）

WebSocket、历史记录管理、响应式数据和复杂模式。 参见： advanced-hooks.md

获取帮助

可以询问：

• Hook 用法：“如何将 useRequest 用于分页？”
• 迁移：“如何从 useState 迁移到 useSetState？”
• 最佳实践：“React hook 的性能优化技巧有哪些？”
• 集成：“如何结合使用 useRequest 和 useAntdTable？”
• 故障排查：“为什么我的 useDebounce 不起作用？”
• TypeScript：“useBoolean 的类型定义是什么？”

全面指南

• 迁移指南 - 从 React 内置功能迁移
• 最佳实践 - 性能与模式

快速参考

// Most commonly used hooks
import {
  useRequest,      // Data fetching
  useMount,        // Component mount
  useUnmount,      // Component unmount
  useSetState,     // State management
  useDebounce,     // Performance
  useThrottle,     // Performance
  useEventListener // DOM events
} from 'ahooks';