ahooks

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Ahooks React Hooks Library

Ahooks React Hooks 库

This skill provides comprehensive expertise for the ahooks React hooks library, covering all 76+ hooks with detailed documentation, examples, and best practices.

本技能提供关于ahooks React hooks库的全面专业知识，涵盖全部76+个钩子，包含详细文档、示例和最佳实践。

Quick Start

快速开始

Basic Usage

基础用法

jsx

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>;
};

jsx

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>;
};

Common Patterns

常见模式

State Management:
```
useSetState
```
,
```
useToggle
```
,
```
useBoolean
```
for complex state
Data Fetching:
```
useRequest
```
for API calls with caching, retry, polling
Performance:
```
useDebounce
```
,
```
useThrottle
```
for optimization
Lifecycle:
```
useMount
```
,
```
useUnmount
```
,
```
useUpdateEffect
```
for component lifecycle

状态管理：使用
```
useSetState
```
、
```
useToggle
```
、
```
useBoolean
```
处理复杂状态
数据获取：
```
useRequest
```
用于带缓存、重试、轮询功能的API调用
性能优化：
```
useDebounce
```
、
```
useThrottle
```
用于性能优化
生命周期：
```
useMount
```
、
```
useUnmount
```
、
```
useUpdateEffect
```
用于组件生命周期管理

Hook Categories

钩子分类

This skill organizes hooks into 9 main categories:

本技能将钩子分为9个主要类别：

📊 State Management (12 hooks)

📊 状态管理（12个钩子）

State utilities for complex state handling. See: state-hooks.md

用于复杂状态处理的状态工具类。 查看： state-hooks.md

🔄 Lifecycle Effects (9 hooks)

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

Component lifecycle and effect management. See: effect-hooks.md

组件生命周期与副作用管理。 查看： effect-hooks.md

🌐 Data Fetching (6 hooks)

🌐 数据获取（6个钩子）

API calls, pagination, infinite scroll, and data caching. See: request-hooks.md

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

⚡ Performance Optimization (9 hooks)

⚡ 性能优化（9个钩子）

Debounce, throttle, memoization, and RAF optimizations. See: performance-hooks.md

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

🎨 DOM & UI (12 hooks)

🎨 DOM与UI（12个钩子）

Event listeners, sizing, scrolling, and UI interactions. See: dom-hooks.md

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

💾 Storage (4 hooks)

💾 存储（4个钩子）

Local storage, session storage, cookies, and URL state. See: dom-hooks.md

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

🌍 Browser APIs (8 hooks)

🌍 浏览器API（8个钩子）

Network status, visibility, keyboard events, and browser features. See: dom-hooks.md

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

⏰ Timers (4 hooks)

⏰ 计时器（4个钩子）

Intervals, timeouts, and countdown utilities. See: advanced-hooks.md

定时器、超时器和倒计时工具类。 查看： advanced-hooks.md

🚀 Advanced Utilities (12 hooks)

🚀 高级工具类（12个钩子）

WebSockets, history management, reactive data, and complex patterns. See: advanced-hooks.md

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

Getting Help

获取帮助

Ask About:

可咨询内容：

Hook Usage: "How to use useRequest with pagination?"
Migration: "How to migrate from useState to useSetState?"
Best Practices: "Performance tips for React hooks?"
Integration: "How to combine useRequest with useAntdTable?"
Troubleshooting: "Why is my useDebounce not working?"
TypeScript: "Type definitions for useBoolean?"

钩子用法："如何结合分页使用useRequest？"
迁移："如何从useState迁移到useSetState？"
最佳实践："React hooks的性能优化技巧？"
集成："如何将useRequest与useAntdTable结合使用？"
问题排查："为什么我的useDebounce不生效？"
TypeScript："useBoolean的类型定义？"

Comprehensive Guides

全面指南

Migration Guide - From React built-ins
Best Practices - Performance and patterns

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

Quick Reference

快速参考

javascript

// 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';

javascript

// 最常用的钩子
import {
  useRequest,      // 数据获取
  useMount,        // 组件挂载
  useUnmount,      // 组件卸载
  useSetState,     // 状态管理
  useDebounce,     // 性能优化
  useThrottle,     // 性能优化
  useEventListener // DOM事件
} from 'ahooks';