ahooks.js：一款强大的React Hooks库及其API使用教程（一）

一、ahooks.js简介

ahooks是一款由阿里巴巴开发团队设计的React Hooks库，提供了一系列实用的React Hooks，以便开发者更好地使用React的功能。ahooks的设计原则是“最小API，最大自由”，旨在提供最小的、最易于理解和使用的API，同时保留最大的使用自由度。

二、ahooks.js安装

使用npm或yarn安装ahooks：

npm install ahooks
# 或者
yarn add ahooks
1
2
3

三、ahooks.js API介绍与使用教程

1. useRequest

useRequest是ahooks中最常用的一个API，它用于处理异步请求和其相关状态。

import { useRequest } from 'ahooks';
import axios from 'axios';

function App() {
  const { data, error, loading } = useRequest(() => axios.get('https://api.example.com'));

  if (loading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Error: {error.message}</div>;
  }
  return <div>{data}</div>;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在上述代码中，useRequest接收一个函数作为参数，该函数返回一个Promise。useRequest会自动处理loading和error状态，使得你可以更专注于业务逻辑。

2. useAntdTable

useAntdTable是一个与Ant Design Table配合使用的Hook，它可以帮助你快速创建一个具有分页、排序和筛选功能的表格。

import { useAntdTable } from 'ahooks';
import { Table } from 'antd';

const getTableData = ({ current, pageSize }) => {
  // 这是一个示例API，你应该替换为你的实际API
  const api = `https://api.example.com?page=${current}&size=${pageSize}`;
  return axios.get(api);
};

function App() {
  const { tableProps, search } = useAntdTable(getTableData, { defaultPageSize: 5 });

  const { type, changeType, submit, reset } = search;

  return (
    <>
      <Table {...tableProps} rowKey="id" />
    </>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在上述代码中，useAntdTable接收一个获取表格数据的函数和一些配置作为参数。getTableData函数应该返回一个Promise，该Promise解析为{ list: [], total: 0 }的格式。

3. useSize

useSize是一个用于获取元素尺寸的Hook。

import { useSize } from 'ahooks';

function App() {
  const [size, ref] = useSize();

  return (
    <div ref={ref}>
      width: {size.width}px, height: {size.height}px
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11

在上述代码中，useSize返回一个数组，第一个元素是尺寸对象，第二个元素是需要测量尺寸的元素的ref。

4. useBoolean

useBoolean 是一个用于处理布尔值状态的 Hook。它返回一个数组，包含一个布尔值和一些操作这个值的函数。

import { useBoolean } from 'ahooks';

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

  return (
    <div>
      <p>{`状态: ${state}`}</p>
      <button onClick={toggle}>切换</button>
      <button onClick={setTrue}>设为真</button>
      <button onClick={setFalse}>设为假</button>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在上述代码中，useBoolean 接收一个初始值作为参数（默认为 false），返回一个数组。数组的第一个元素是当前的布尔值，第二个元素是一个对象，包含 toggle、setTrue 和 setFalse 三个函数，用于改变布尔值的状态。

5. useToggle

useToggle 是一个用于在两个值之间切换的 Hook。它返回一个数组，包含当前的值和一个切换函数。

import { useToggle } from 'ahooks';

function App() {
  const [state, { toggle }] = useToggle('Hello', 'World');

  return (
    <div>
      <p>{state}</p>
      <button onClick={toggle}>切换</button>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12

在上述代码中，useToggle 接收两个参数，返回一个数组。数组的第一个元素是当前的值，第二个元素是一个对象，包含一个 toggle 函数，用于在两个值之间切换。

6. useHover

useHover 是一个用于追踪元素 hover 状态的 Hook。它返回一个数组，包含当前的 hover 状态和一个 ref。

import { useHover } from 'ahooks';

function App() {
  const [isHovering, hoverRef] = useHover();

  return (
    <div ref={hoverRef}>
      {isHovering ? '正在悬停' : '未悬停'}
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11

在上述代码中，useHover 返回一个数组。数组的第一个元素是一个布尔值，表示当前元素是否正在被悬停，第二个元素是一个 ref，需要被赋给需要追踪 hover 状态的元素。

对不起，我理解错了你的要求。让我们按照你的要求，从第七个开始介绍，并提供代码示例和解释。

7. useDebounce

useDebounce 是一个用于防抖动操作的 Hook，它可以帮助我们控制某些频繁触发的操作。

import { useDebounce } from 'ahooks';
import { useState } from 'react';

function App() {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounce(value, { wait: 500 });

  return (
    <div>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Typed value"
        style={{ width: 280, marginRight: 16 }}
      />
      <p>Debounced Value: {debouncedValue}</p>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在上述代码中，useDebounce 接收两个参数。第一个参数是需要防抖的值，第二个参数是一个配置对象，其中的 wait 属性用于设置防抖延迟的时间。useDebounce 返回一个新的值，这个值会在指定的延迟时间后更新。

8. useEventListener

useEventListener 是一个用于添加事件监听器的 Hook。

import { useEventListener } from 'ahooks';

function App() {
  useEventListener('click', () => {
    console.log('document clicked');
  });

  return <div>Hello World</div>;
}
1
2
3
4
5
6
7
8
9

在上述代码中，useEventListener 接收两个参数。第一个参数是需要监听的事件类型，例如 ‘click’、‘keydown’ 等。第二个参数是事件触发时的回调函数。这个 Hook 会在组件挂载时添加事件监听器，并在组件卸载时自动移除。

9. useFusionTable

useFusionTable 是一个用于处理表格数据的 Hook。

import { useFusionTable } from 'ahooks';

function App() {
  const { tableProps, search } = useFusionTable(getTableData, {
    defaultPageSize: 5,
  });

  return (
    <Table {...tableProps} rowKey="id" />
  );
}
1
2
3
4
5
6
7
8
9
10
11

在上述代码中，useFusionTable 接收两个参数。第一个参数是一个获取表格数据的函数，第二个参数是一个配置对象，可以设置默认的页大小等。useFusionTable 返回一个对象，其中包含 tableProps 和 search，分别用于控制表格的属性和搜索功能。

10. useKeyPress

useKeyPress 是一个用于监听键盘按键的 Hook。

import { useKeyPress } from 'ahooks';

function App() {
  const isPressingA = useKeyPress('a');

  return <div>{isPressingA ? 'You are pressing A' : 'Not pressing A'}</div>;
}
1
2
3
4
5
6
7

在上述代码中，useKeyPress 接收一个参数，即需要监听的按键。它返回一个布尔值，表示该按键是否正在被按下。

11. useLoading

useLoading 是一个用于显示加载状态的 Hook。

import { useLoading } from 'ahooks';

function App() {
  const [isLoading, { startLoading, endLoading }] = useLoading();

  return (
    <div>
      {isLoading ? 'Loading...' : 'Not Loading'}
      <button onClick={startLoading}>Start Loading</button>
      <button onClick={endLoading}>End Loading</button>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13

在上述代码中，useLoading 不需要接收任何参数，它返回一个数组。数组的第一个元素是一个布尔值，表示是否正在加载。第二个元素是一个对象，包含 startLoading 和 endLoading 方法，用于控制加载状态。

12. usePrevious

usePrevious 是一个用于获取前一个状态的 Hook。

import { usePrevious } from 'ahooks';
import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const previousCount = usePrevious(count);

  return (
    <div>
      <p>Current Count: {count}</p>
      <p>Previous Count: {previousCount}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在上述代码中，usePrevious 接收一个参数，即当前的状态值。它返回前一个状态的值。

13. useForm

useForm 是一个用于处理表单数据双向绑定的 Hook。

import { useForm } from 'ahooks';

function App() {
  const { form, setForm, reset } = useForm();

  const handleSubmit = () => {
    // 处理表单提交逻辑
    console.log(form);
  };

  return (
    <div>
      <input
        type="text"
        value={form.name}
        onChange={(e) => setForm({ ...form, name: e.target.value })}
      />
      <input
        type="text"
        value={form.email}
        onChange={(e) => setForm({ ...form, email: e.target.value })}
      />
      <button onClick={handleSubmit}>提交</button>
      <button onClick={reset}>重置</button>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

在上述代码中，我们使用 useForm 创建一个表单对象。它返回一个包含 form、setForm 和 reset 的对象。

• form 是一个表示表单数据的对象，可以通过 form.name 和 form.email 来访问表单字段的值。
• setForm 是一个函数，用于更新表单数据。在输入框的 onChange 事件中，我们使用 setForm 来更新相应字段的值。
• reset 是一个函数，用于重置表单数据为初始状态。

通过使用 useForm，我们可以轻松地实现表单数据的双向绑定，并处理表单提交和重置的逻辑。

14. useUpdate

useUpdate 是一个用于强制更新组件的 Hook。

import { useUpdate } from 'ahooks';

function App() {
  const update = useUpdate();

  return (
    <div>
      Current Time: {Date.now()}
      <button onClick={update}>Update</button>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12

在上述代码中，useUpdate 不需要接收任何参数，它返回一个函数。调用这个函数可以强制更新组件。

15. useUnmount

useUnmount 是一个用于处理组件卸载时的逻辑的 Hook。

import { useUnmount } from 'ahooks';

function App() {
  useUnmount(() => {
    console.log('Component is unmounting');
  });

  return <div>Hello World</div>;
}
1
2
3
4
5
6
7
8
9

在上述代码中，useUnmount 接收一个函数作为参数，这个函数将在组件卸载时被调用。

16. useThrottle

useThrottle 是一个用于实现节流操作的 Hook。

import { useThrottle } from 'ahooks';
import { useState } from 'react';

function App() {
  const [value, setValue] = useState('');
  const throttledValue = useThrottle(value, { wait: 500 });

  return (
    <div>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Typed value"
        style={{ width: 280, marginRight: 16 }}
      />
      <p>Throttled Value: {throttledValue}</p>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在上述代码中，useThrottle 接收两个参数。第一个参数是需要节流的值，第二个参数是一个配置对象，其中的 wait 属性用于设置节流的时间。useThrottle 返回一个新的值，这个值会在指定的时间间隔内最多改变一次。

17. useToggle

useToggle 是一个用于切换布尔值的 Hook。

import { useToggle } from 'ahooks';

function App() {
  const [state, { toggle }] = useToggle();

  return (
    <div>
      <p>State: {state ? 'ON' : 'OFF'}</p>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12

在上述代码中，useToggle 返回一个数组。数组的第一个元素是当前的状态，第二个元素是一个对象，包含 toggle 方法，用于切换状态。

18. useUpdateEffect

useUpdateEffect 是一个用于处理组件更新时的逻辑的 Hook。

import { useUpdateEffect } from 'ahooks';
import { useState } from 'react';

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

  useUpdateEffect(() => {
    console.log('Count has changed');
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在上述代码中，useUpdateEffect 接收两个参数。第一个参数是一个函数，这个函数将在依赖项更新时被调用。第二个参数是一个依赖项数组。

19. useWhyDidYouUpdate

useWhyDidYouUpdate 是一个用于跟踪组件更新原因的 Hook。

import { useWhyDidYouUpdate } from 'ahooks';
import { useState } from 'react';

function App(props) {
  useWhyDidYouUpdate('App', props);

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在上述代码中，useWhyDidYouUpdate 接收两个参数。第一个参数是组件的名字，第二个参数是组件的 props。这个 Hook 会在组件更新时打印出更新的原因。

当然，让我们继续介绍一个 API：useInterval。

20.useInterval

useInterval 是一个用于设置定时器的 Hook。

import { useInterval } from 'ahooks';
import { useState } from 'react';

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

  useInterval(() => {
    setCount(count + 1);
  }, 1000);

  return <div>Count: {count}</div>;
}
1
2
3
4
5
6
7
8
9
10
11
12

在上述代码中，useInterval 接收两个参数。第一个参数是一个函数，这个函数将在指定的间隔时间被调用。第二个参数是间隔时间，单位是毫秒。

这个 Hook 会在组件挂载时开始定时器，并在组件卸载时自动清除定时器。所以你不需要手动管理定时器的生命周期。

更多关于ahooks.js的API介绍，请查看专栏：ahooks.js：一款强大的React Hooks库