ahooks

Ahooks React Hooks ライブラリ

このスキルでは、詳細なドキュメント、例、ベストプラクティスを通じて、76 種類以上のフックを網羅する ahooks React hooks ライブラリについて包括的な知識を提供します。

クイックスタート

基本的な使い方

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
• データ取得：キャッシュ、再試行、ポーリングに対応した API 呼び出しには useRequest
• パフォーマンス：最適化には useDebounce、useThrottle
• ライフサイクル：コンポーネントのライフサイクルには useMount、useUnmount、useUpdateEffect

フックのカテゴリー

このスキルでは、フックを 9 つの主なカテゴリーに分類しています。

📊 状態管理（12 フック）

複雑な状態を扱うための状態ユーティリティです。 参照： state-hooks.md

🔄 ライフサイクルエフェクト（9 フック）

コンポーネントのライフサイクルとエフェクトを管理します。 参照： effect-hooks.md

🌐 データ取得（6 フック）

API 呼び出し、ページネーション、無限スクロール、データキャッシュに対応します。 参照： request-hooks.md

⚡ パフォーマンス最適化（9 フック）

デバウンス、スロットリング、メモ化、RAF による最適化に対応します。 参照： performance-hooks.md

🎨 DOM と UI（12 フック）

イベントリスナー、サイズ、スクロール、UI インタラクションに対応します。 参照： dom-hooks.md

💾 ストレージ（4 フック）

ローカルストレージ、セッションストレージ、Cookie、URL の状態に対応します。 参照： dom-hooks.md

🌍 ブラウザー API（8 フック）

ネットワーク状態、表示状態、キーボードイベント、ブラウザー機能に対応します。 参照： dom-hooks.md

⏰ タイマー（4 フック）

インターバル、タイムアウト、カウントダウンのユーティリティです。 参照： advanced-hooks.md

🚀 高度なユーティリティ（12 フック）

WebSocket、履歴管理、リアクティブデータ、複雑なパターンに対応します。 参照： advanced-hooks.md

ヘルプの利用

質問できる内容：

• フックの使い方：「ページネーションで useRequest を使う方法は？」
• 移行：「useState から useSetState に移行する方法は？」
• ベストプラクティス：「React フックのパフォーマンスに関するヒントは？」
• 統合：「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';