ahooks：专为 React 开发设计的实用 Hooks 库介绍 – wiki基地

ahooks：赋能 React 开发的实用 Hooks 百宝箱

随着 React Hooks 的横空出世，前端开发模式迎来了深刻的变革。Hooks 使得我们在无需编写 Class 组件的情况下，也能使用 State 和其他 React 特性，极大地提高了组件的可复用性和逻辑组织的清晰度。然而，Hooks 本身只是一个基础能力，在实际项目开发中，我们仍然会遇到许多常见的、重复性的逻辑，例如状态管理、异步请求、DOM 操作、定时器处理、事件监听等等。如果每一次都从头开始编写自定义 Hooks，不仅效率低下，而且容易出错，难以保证质量和一致性。

正是在这样的背景下，优秀的 React Hooks 库应运而生。它们旨在将这些常见的、复杂的逻辑封装成易于使用、经过充分测试和优化的 Hooks，供开发者直接使用，从而解放生产力，提高代码质量。在众多 Hooks 库中，由阿里巴巴（现蚂蚁集团）前端团队开源的 ahooks 无疑是其中的佼佼者。凭借其丰富的功能、卓越的质量、详细的文档和活跃的社区，ahooks 已经成为许多 React 项目的首选实用 Hooks 库。

本文将深入探讨 ahooks，详细介绍它的特性、核心理念、主要分类以及精选的实用 Hooks，旨在帮助 React 开发者全面了解并掌握这个强大的工具库。

为什么选择 ahooks？它解决了什么问题？

在没有 ahooks 或类似 Hooks 库的情况下，React 开发者在日常工作中会面临以下挑战：

1. 重复造轮子: 许多功能是跨项目、跨组件通用的，例如 Debounce（防抖）、Throttle（节流）、 gérer 异步请求的状态（loading、error、data）、监听窗口大小变化、处理剪贴板操作等。每次都要重新实现这些逻辑，耗时耗力。
2. 实现复杂逻辑时的陷阱: 一些看似简单的逻辑，在 React Hooks 的语境下实现起来却可能非常复杂且容易出错。例如，正确处理 useEffect 的依赖项、清理副作用（如事件监听、定时器、请求）、避免无限循环、处理竞态条件（Race Condition）等。手写这些逻辑需要对 Hooks 的生命周期和执行机制有深入理解。
3. 代码质量和一致性: 不同的开发者可能会用不同的方式实现相同的 Hooks，导致代码风格不统一，维护困难。自己实现的 Hooks 可能没有经过充分的测试，存在潜在的 Bug。
4. 性能优化: 一些模式的实现涉及到性能优化，例如 Debounce/Throttle 的实现需要考虑定时器的管理；监听 DOM 事件需要注意事件的注册与移除；处理大量数据时可能需要虚拟列表等。手写高性能的 Hooks 需要专业知识和经验。
5. 维护成本: 自己实现的 Hooks 需要自己维护、测试和更新。而使用成熟的 Hooks 库，这些工作都由库的维护者承担。

ahooks 正是为了解决这些问题而诞生的。它提供了一系列高质量、经过生产环境验证的 Hooks，涵盖了 React 应用开发中常见的各种场景，旨在：

• 提高开发效率: 将通用逻辑封装，开发者可以直接调用，避免重复编写。
• 提升代码质量: 提供的 Hooks 经过充分测试和优化，减少 Bug，代码更健练。
• 标准化开发模式: 提供一套标准的解决方案，促进团队内部的代码一致性。
• 优化应用性能: 内置了一些性能优化策略，如 Debounce/Throttle、虚拟列表等。
• 降低维护成本: 将底层复杂性抽象，开发者只需关注业务逻辑。

ahooks 是什么？核心理念

ahooks 是一个基于 React Hooks 的实用工具库。它并非对 React 原生 Hooks 的简单封装，而是针对实际开发中的痛点，提供了更高层级的抽象和更完备的功能。

ahooks 的核心理念可以概括为：

• 实用 (Practical): 专注于解决 React 开发中最常见、最实际的问题。
• 高质量 (High-Quality): 提供的 Hooks 经过严格的测试，在大型项目（如蚂蚁集团内部应用）中得到广泛验证，具备生产可用性。
• 完备 (Comprehensive): 覆盖了状态管理、异步操作、UI 交互、DOM 操作等多个方面的 Hooks。
• 易用 (Easy-to-Use): 提供清晰的 API 和详细的文档，上手简单。
• 一致 (Consistent): Hooks 的命名、参数、返回值遵循统一的规范。

它就像一个精心打造的“百宝箱”，里面装着各种针对 React 开发场景量身定制的“工具”，开发者可以根据需要随时取用。

ahooks 的主要分类与精选 Hooks 详解

ahooks 将其提供的 Hooks 按照功能进行了清晰的分类，方便开发者查找和使用。以下是一些主要的分类以及每个分类下精选的、具有代表性的 Hooks 的详细介绍。

1. State Hooks (状态管理)

这类 Hooks 专注于各种状态的管理，包括基本状态、布尔状态、数字状态、对象/数组状态、上一次状态等。

• useBoolean / useToggle:
  • 解决问题: 管理只有两个状态（通常是 true/false 或指定两个值）的状态。例如，控制模态框的显示/隐藏、切换某个功能的开启/关闭、管理加载状态等。
  • 详解: useBoolean 返回一个布尔状态及其操作函数 setTrue, setFalse, toggle。useToggle 更通用，可以管理任意两个（或多个）值之间的切换。

  • 示例:
    “`javascript
    import { useBoolean } from ‘ahooks’;

    function MyComponent() {
    const [visible, { toggle, setTrue, setFalse }] = useBoolean(false);

    return (

    Toggle Modal
    Show Modal
    Hide Modal
    {visible &&

    Modal is visible!

    }

    );
    }
    * **优点:** 提供声明式 API，代码更清晰，避免手动编写 `useState` 及其相应的切换逻辑。
* **`usePrevious`:**
* **解决问题:** 获取某个 State 或 Prop 在上一次渲染时的值。这在比较当前值和上一次值的变化时非常有用，例如，判断数据是否更新、执行只在特定值变化时才运行的副作用等。
* **详解:** 接收一个值作为参数，返回该值在上一次组件渲染完成后的值。
* **示例:**javascript
    import { usePrevious } from ‘ahooks’;
    import { useState } from ‘react’;

    function MyComponent() {
    const [count, setCount] = useState(0);
    const prevCount = usePrevious(count);

    return (

    Current Count: {count}

    Previous Count: {prevCount}

    setCount(count + 1)}>Increment

    );
    }
    * **优点:** 提供了一种简洁且可靠的方式来跟踪值的历史变化，避免了手动使用 `useRef` 来保存上一次值的繁琐和潜在错误。
* **`useGetState`:**
* **解决问题:** 在异步操作（如 `setTimeout`, Promise 回调）或事件处理函数中获取 State 的最新值，而无需将其作为 `useEffect` 的依赖。
* **详解:** 返回一个 State 的 getter 函数。调用此函数总是能获取到 State 的当前最新值。
* **示例:**javascript
    import { useGetState } from ‘ahooks’;
    import { useState } from ‘react’;

    function MyComponent() {
    const [count, setCount, getCount] = useGetState(0);

    const handleClick = () => {
    setTimeout(() => {
    // 在 setTimeout 中获取最新的 count 值
    console.log(‘Current count inside setTimeout:’, getCount());
    }, 1000);
    setCount(count + 1);
    };

    return (

    Count: {count}

    Increment and Log After 1s

    );
    }
    ``
* **优点:** 解决了在闭包中获取旧 State 值的常见问题，特别是在useEffect` 或异步回调中，可以避免添加不必要的依赖项。

2. Effect Hooks (副作用处理)

这类 Hooks 是对 React 原生 useEffect 的扩展和增强，用于更精细地控制副作用的执行时机和依赖项比较。

• useUpdateEffect:
  • 解决问题: 类似于 useEffect，但会忽略组件首次渲染时的执行，只在依赖项发生变化时执行。这对于只需要响应状态更新而不是初始加载的副作用非常有用。
  • 详解: API 与 useEffect 相同，但行为不同。

  • 示例:
    “`javascript
    import { useUpdateEffect } from ‘ahooks’;
    import { useState } from ‘react’;

    function MyComponent() {
    const [count, setCount] = useState(0);

    // 这个 effect 会在组件首次渲染后执行
    // useEffect(() => { console.log(‘useEffect:’, count); }, [count]);

    // 这个 effect 只在 count 变化时执行，首次渲染忽略
    useUpdateEffect(() => {
    console.log(‘useUpdateEffect – count changed:’, count);
    // 执行一些依赖 count 变化的副作用
    }, [count]);

    return (

    Count: {count}

    setCount(count + 1)}>Increment

    );
    }
    * **优点:** 避免了在组件挂载时执行不必要的副作用，代码意图更清晰。
* **`useDeepCompareEffect`:**
* **解决问题:** 当 `useEffect` 的依赖项是对象或数组等引用类型时，即使其内部的值发生了变化，只要引用地址没变，`useEffect` 也不会重新执行。如果需要深度比较依赖项的内容来触发副作用，就需要手动实现深度比较逻辑。
* **详解:** API 与 `useEffect` 相同，但它会对依赖项数组进行深度比较，只有当数组中任意一个依赖项的“内容”发生变化时，才会重新执行副作用。
* **示例:**javascript
    import { useDeepCompareEffect } from ‘ahooks’;
    import { useState, useMemo } from ‘react’;

    function MyComponent() {
    const [userInfo, setUserInfo] = useState({ name: ‘Alice’, age: 18 });

    // 每次父组件 re-render，即使 userInfo 的内容没变，这个对象也是新的引用
    // 如果用 useEffect，每次都会执行
    // useEffect(() => { console.log(‘Shallow compare effect:’, userInfo); }, [userInfo]);

    // 使用 useMemo 创建一个稳定的对象引用（如果内容没变）
    // const memoizedUserInfo = useMemo(() => userInfo, [userInfo]); // 这样不行

    // useDeepCompareEffect 会深度比较 userInfo 的内容
    useDeepCompareEffect(() => {
    console.log(‘Deep compare effect – userInfo content changed:’, userInfo);
    // 执行依赖 userInfo 内容变化的副作用，例如发送请求
    }, [userInfo]); // 注意这里依赖的是 userInfo 对象本身

    return (

    User: {userInfo.name}, Age: {userInfo.age}

    setUserInfo({ …userInfo, age: userInfo.age + 1 })}>
    Grow older
    
    {/ 这个按钮会触发渲染，但不会改变 userInfo 的内容 /}
    {}}>Render Parent (userInfo unchanged)

    );
    }
    ``
* **优点:** 解决了依赖项为对象或数组时useEffect` 无法正确触发的问题，简化了深度比较逻辑的实现。但请注意，深度比较有性能开销，应谨慎使用。

3. UI Hooks (用户界面交互)

这类 Hooks 抽象了常见的 UI 交互模式，如拖拽、下拉刷新、虚拟列表等。

• useDraggable:
  • 解决问题: 实现元素的拖拽功能。手动实现拖拽涉及到鼠标事件（mousedown, mousemove, mouseup）的监听、位置计算、边界限制、性能优化（如 Debounce/Throttle 或 requestAnimationFrame）以及事件清理等，非常繁琐且容易出错。
  • 详解: 接收一个需要拖拽的 DOM 元素的 Ref 或函数，以及可选的配置项（如初始位置、限制拖拽范围、步长等）。返回元素的当前位置状态。

  • 示例 (概念性):
    “`javascript
    import { useDraggable } from ‘ahooks’;
    import { useRef } from ‘react’;

    function MyComponent() {
    const dragRef = useRef(null);
    const position = useDraggable(dragRef, {
    initialValue: { x: 100, y: 100 },
    // bounds: { left: 0, top: 0, right: 500, bottom: 500 },
    });

    return (

    
    Drag Me

    );
    }
    * **优点:** 将复杂的拖拽逻辑高度抽象，开发者只需关注元素的样式和初始位置，大大简化了拖拽功能的实现。
* **`useVirtualList`:**
* **解决问题:** 渲染包含大量数据的长列表时，一次性渲染所有列表项会导致严重的性能问题，页面卡顿甚至崩溃。虚拟列表只渲染当前视口可见的列表项，通过动态计算和替换 DOM 元素来模拟完整列表的滚动。
* **详解:** 接收一个大型数据集和一个配置对象（如行高、容器 Ref 等）。返回当前视口需要渲染的数据子集、滚动容器的 Ref 以及一些辅助状态和函数。
* **示例 (概念性):**javascript
    import { useVirtualList } from ‘ahooks’;
    import { useRef, useMemo } from ‘react’;

    function MyVirtualList({ data }) {
    const containerRef = useRef(null);
    // 假设每行高度固定为 50px
    const [list, wrapperProps] = useVirtualList(data, {
    containerTarget: containerRef,
    itemHeight: 50,
    });

    return (

    {/ wrapperProps 应用在虚拟列表的渲染容器上 /}

    {list.map((item) => (

    
    Item {item.data}

    ))}

    );
    }

    // 使用 MyVirtualList，传入大量数据
    const largeData = Array.from({ length: 10000 }).map((_, i) => Item ${i});
    //
    “`
    * 优点: 极大地优化了长列表的渲染性能，提升了用户体验。将虚拟列表的复杂实现逻辑封装，开发者无需关心滚动计算、元素复用等细节。

4. DOM Hooks (DOM 操作与事件)

这类 Hooks 简化了对 DOM 元素、浏览器窗口、事件等的监听和操作。

• useEventListener:
  • 解决问题: 在组件生命周期内安全地监听 DOM 事件（包括元素、Window、Document），并在组件卸载时自动移除监听器。手动实现需要使用 useRef 存储目标元素、在 useEffect 中添加/移除监听器，且要处理依赖项和闭包问题。
  • 详解: 接收事件类型、事件处理函数，以及目标元素（Ref 或 DOM 对象）和可选的事件选项（如 capture, passive）。

  • 示例:
    “`javascript
    import { useEventListener } from ‘ahooks’;
    import { useState } from ‘react’;

    function MyComponent() {
    const [coords, setCoords] = useState({ x: 0, y: 0 });

    const handleMouseMove = (event) => {
    setCoords({ x: event.clientX, y: event.clientY });
    };

    // 监听 document 的 mousemove 事件
    useEventListener(‘mousemove’, handleMouseMove, { target: document });

    return (

    Mouse Position: ({coords.x}, {coords.y})

    );
    }
    * **优点:** 简化了事件监听的设置和清理，避免了常见的内存泄漏问题，代码更简洁安全。
* **`useClickAway`:**
* **解决问题:** 实现点击元素外部区域触发特定行为的场景，例如点击下拉菜单外部关闭菜单、点击模态框背景关闭模态框等。需要监听全局点击事件，判断点击位置是否在指定元素内部。
* **详解:** 接收一个需要“保护”的 DOM 元素的 Ref 或数组，以及点击外部时触发的回调函数。
* **示例:**javascript
    import { useClickAway } from ‘ahooks’;
    import { useRef, useState } from ‘react’;

    function MyDropdown() {
    const [visible, setVisible] = useState(false);
    const dropdownRef = useRef(null);

    // 点击 dropdownRef 外部时，关闭下拉菜单
    useClickAway(() => {
    setVisible(false);
    }, dropdownRef);

    return (

    setVisible(!visible)}>Toggle Dropdown
    {visible && (

    
    Dropdown Content

    )}

    );
    }
    * **优点:** 将复杂的点击外部判断逻辑和事件监听封装，使得实现此类 UI 交互变得非常简单。
* **`useScroll`:**
* **解决问题:** 获取或监听元素的滚动位置（`scrollTop`, `scrollLeft`）。
* **详解:** 接收一个目标元素（Ref 或 DOM 对象），返回其当前的滚动位置。
* **示例:**javascript
    import { useScroll } from ‘ahooks’;
    import { useRef } from ‘react’;

    function MyScrollableDiv() {
    const scrollRef = useRef(null);
    const scroll = useScroll(scrollRef); // 默认监听目标元素的滚动

    return (

    Scroll Top: {scroll?.top}

    Scroll Left: {scroll?.left}

    {/ Content to make it scroll /}
    {Array.from({ length: 20 }).map((_, i) =>

    Item {i}

    )}

    );
    }
    “`
    * 优点: 方便获取元素的滚动状态，可以用于实现滚动加载、滚动进度条等功能。

5. Advanced Hooks (高级功能)

这类 Hooks 封装了更复杂的逻辑，通常涉及到异步操作、定时器、浏览器 API 等。

• useRequest:
  • 解决问题: 管理异步操作（如发送 HTTP 请求、调用 Promise 函数）的整个生命周期，包括 loading 状态、错误处理、结果缓存、轮询、防抖、节流、手动触发等。这是 ahooks 中最强大和常用的 Hooks 之一，几乎是管理数据请求的标准解决方案。
  • 详解: 接收一个异步函数作为参数，返回一个包含 loading 状态、错误信息、请求结果、手动触发函数、取消函数等的状态对象。支持丰富的配置项。
  • 核心特性:
    • 自动管理 loading 状态。
    • 自动捕获和管理 error。
    • 返回请求结果 data。
    • run 方法：手动触发异步函数。
    • cancel 方法：取消当前的异步执行。
    • polling: 支持定时轮询。
    • debounce / throttle: 对请求进行防抖或节流，常用于搜索建议等场景。
    • ready: 控制请求是否执行。
    • refreshOnWindowFocus: 窗口重新聚焦时自动刷新。
    • cacheKey: 支持请求结果缓存和 SWR (Stale-While-Revalidate) 模式。

  • 示例:
    “`javascript
    import { useRequest } from ‘ahooks’;
    import axios from ‘axios’; // 使用 axios 作为异步函数示例

    // 模拟一个异步请求函数
    async function getUserInfo(userId) {
    console.log(‘Fetching user info for:’, userId);
    return new Promise((resolve, reject) => {
    setTimeout(() => {
    if (userId === 123) {
    resolve({ name: ‘Alice’, age: 30 });
    } else if (userId === 404) {
    reject(new Error(‘User not found!’));
    } else {
    resolve({ name: ‘Guest’, age: null });
    }
    }, 1000);
    });
    }

    function MyComponent() {
    const { data, error, loading, run } = useRequest(getUserInfo, {
    manual: true, // 初始不自动执行，需要手动调用 run
    // pollingInterval: 3000, // 每隔 3 秒轮询
    // debounceInterval: 500, // 对 run 的调用进行 500ms 防抖
    });

    if (loading) {
    return

    Loading user…

    ;
    }

    if (error) {
    return

    Error: {error.message}

    ;
    }

    return (

    {data ? (

    User Name: {data.name}

    User Age: {data.age}

    ) : (

    No user data yet.

    )}
    run(123)}>Load User 123
    run(404)}>Load User 404
    run(1)}>Load Guest

    );
    }
    * **优点:** 极大地简化了异步请求的状态管理和复杂逻辑（轮询、缓存等），是 ahooks 的明星 Hooks，强烈推荐使用。
* **`useDebounce` / `useThrottle`:**
* **解决问题:** 对一个“值”进行防抖或节流。与 `useDebounceEffect` / `useThrottleEffect` 不同，它们返回的是一个经过防抖/节流处理后的值，而不是控制 effect 的执行。常用于处理输入框的值变化，当用户停止输入一段时间后（防抖）或在一定时间内最多处理一次（节流）时，再使用这个值进行搜索或触发其他操作。
* **详解:** 接收一个值和延迟时间，返回防抖/节流后的值。
* **示例 (useDebounce):**javascript
    import { useDebounce } from ‘ahooks’;
    import { useState } from ‘react’;

    function MyComponent() {
    const [value, setValue] = useState(”);
    // value 变化后，等待 500ms 没有新的变化，才会更新 debouncedValue
    const debouncedValue = useDebounce(value, { wait: 500 });

    // 可以使用 useRequest 监听 debouncedValue 的变化来触发搜索
    // const { data, loading } = useRequest(() => searchApi(debouncedValue), {
    // ready: !!debouncedValue, // 只有 debouncedValue 有值时才搜索
    // debounceInterval: 300 // 这里是对 useRequest 本身的防抖，不是对值的防抖
    // });

    return (

    setValue(e.target.value)}
    placeholder=”Type something…”
    />

    Input Value: {value}

    Debounced Value: {debouncedValue}

    {/ {loading &&

    Searching…

    } /}
    {/ {data &&

    Search Results: …

    } /}

    );
    }
    * **优点:** 方便地对动态变化的值进行限频处理，特别适合输入搜索、滑块拖动等场景。
* **`useTimeout` / `useInterval`:**
* **解决问题:** 在函数式组件中安全地使用 `setTimeout` 和 `setInterval`，并在组件卸载时自动清理定时器。手动实现需要在 `useEffect` 中创建定时器，并在返回的清理函数中清除定时器，容易遗漏清理逻辑。
* **详解:** `useTimeout` 接收一个回调函数和延迟时间，延迟后执行回调；`useInterval` 接收一个回调函数和间隔时间，定时执行回调。它们都返回用于取消定时器的函数。
* **示例 (useInterval):**javascript
    import { useInterval } from ‘ahooks’;
    import { useState } from ‘react’;

    function MyComponent() {
    const [count, setCount] = useState(0);

    // 每隔 1000ms (1秒) 执行一次 setCount
    // useInterval 会自动在组件卸载时清除定时器
    useInterval(() => {
    setCount(c => c + 1);
    }, 1000); // null 可以暂停定时器

    return (

    Count: {count}

    );
    }
    “`
    * 优点: 提供了一种简洁、安全的方式来使用定时器，避免了手动清理的麻烦和潜在的内存泄漏。

6. LifeCycle Hooks (生命周期)

虽然原生 Hooks 已经覆盖了生命周期，但 ahooks 提供了一些更具描述性的 Hooks。

• useMount / useUnmount:
  • 解决问题: 分别在组件挂载后和卸载前执行特定逻辑。它们是 useEffect 的简化版本，用于表达单一的挂载/卸载副作用，无需关心依赖项数组。
  • 详解: useMount 接收一个函数，只在组件首次渲染挂载后执行一次。useUnmount 接收一个函数，只在组件卸载前执行一次。

  • 示例:
    “`javascript
    import { useMount, useUnmount } from ‘ahooks’;

    function MyComponent() {
    useMount(() => {
    console.log(‘Component mounted!’);
    // 执行一些只在挂载时进行的操作，例如初始化数据、添加全局事件监听等 (注意 cleanup)
    });

    useUnmount(() => {
    console.log(‘Component will unmount!’);
    // 执行一些只在卸载时进行的操作，例如清理定时器、移除事件监听、取消订阅等
    });

    return (

    Check console for mount/unmount logs.

    );
    }
    ``
* **优点:** 代码更具语义性，明确表达了副作用的执行时机。对于简单的挂载/卸载逻辑，比写完整的useEffect` 更简洁。

7. Effect Hooks (针对 Effect 的实用工具)

除了上面提到的 useUpdateEffect 和 useDeepCompareEffect，还有其他与 Effect 相关的辅助 Hooks。

• useDebounceEffect / useThrottleEffect:
  • 解决问题: 对 useEffect 的执行进行防抖或节流。当依赖项变化非常频繁时，可以限制 effect 的执行频率，避免不必要的计算或副作用。
  • 详解: 接收 effect 函数、依赖项数组和防抖/节流配置。在依赖项变化后，等待指定时间（防抖）或在指定间隔内最多执行一次（节流）来执行 effect 函数。

  • 示例 (useDebounceEffect):
    “`javascript
    import { useDebounceEffect } from ‘ahooks’;
    import { useState } from ‘react’;

    function MyComponent() {
    const [value, setValue] = useState(”);

    // value 变化时，effect 会进行 500ms 防抖
    useDebounceEffect(
    () => {
    console.log(‘Debounced effect triggered by value:’, value);
    // 执行一些依赖 value 变化的、需要防抖的操作，例如发送搜索请求
    },
    [value], // 依赖 value
    {
    wait: 500, // 防抖时间
    },
    );

    return (

    setValue(e.target.value)}
    placeholder=”Type something…”
    />

    Input Value: {value}

    );
    }
    “`
    * 优点: 精细控制副作用的执行频率，优化性能，避免在快速连续的状态更新时执行不必要的副作用。

这仅仅是 ahooks 库中 Hooks 的一部分精选介绍。实际上，ahooks 提供了远不止这些 Hooks，还包括 useLockFn (锁定异步函数防止重复执行)、useWebSocket (管理 WebSocket 连接)、useWorker (使用 Web Worker 提高性能)、useCountDown (倒计时)、useInfiniteScroll (无限滚动加载) 等等，几乎涵盖了 React 开发中你能想到的各种通用场景。

如何开始使用 ahooks

使用 ahooks 非常简单：

1. 安装:
   bash
npm install ahooks --save
# 或者
yarn add ahooks

2. 导入和使用: 在你的 React 组件中，从 ahooks 包中导入需要的 Hook 并直接使用。
   “`javascript
   import { useRequest, useBoolean } from ‘ahooks’;
   import React from ‘react’;

   function MyComponent() {
   const [modalVisible, { toggle: toggleModal }] = useBoolean(false);

   const { data, loading, error } = useRequest(‘/api/user’); // 简单的 GET 请求示例

   if (loading) return

   Loading…

   ;
   if (error) return

   Error: {error.message}

   ;

   return (

   User Data: {JSON.stringify(data)}

   Toggle Modal
   {modalVisible &&

   Modal is open!

   }

   );
   }
   “`

ahooks 的文档和社区

ahooks 拥有非常详尽和友好的官方文档（中文和英文），每个 Hook 都有清晰的用途说明、API 列表、参数说明和丰富的示例代码。当你需要查找特定功能的 Hook 或了解 Hook 的详细用法时，官方文档是你最好的资源。

作为一个开源项目，ahooks 也有活跃的社区。你可以在 GitHub 上提交 Issue 报告 Bug、提出功能建议，也可以参与讨论。这保证了 ahooks 能够持续发展和改进。

总结

ahooks 是一个专为 React 开发者打造的强大、实用且高质量的 Hooks 库。它将 React 应用开发中常见的状态管理、异步操作、UI 交互、DOM 操作等逻辑抽象封装成易于使用的 Hooks，极大地提高了开发效率，提升了代码质量和可维护性。

无论你是新手还是经验丰富的 React 开发者，ahooks 都能成为你工具箱中的得力助手。通过学习和使用 ahooks，你可以避免重复造轮子，专注于业务逻辑，写出更清晰、更健壮、性能更好的 React 应用。

如果你还没有尝试过 ahooks，强烈建议你花一些时间去探索它的官方文档，并将其引入你的下一个 React 项目中。相信你很快就会爱上这个强大的 Hooks 百宝箱！