当前位置：首页 > news >正文

React强大且灵活hooks库——ahooks入门实践之常用场景hook

news 2025/7/14 7:46:08

什么是 ahooks？

ahooks 是一个 React Hooks 库，提供了大量实用的自定义 hooks，帮助开发者更高效地构建 React 应用。其中场景类 hooks 是 ahooks 的一个重要分类，专门针对特定业务场景提供解决方案。

安装 ahooks

npm install ahooks

常用场景类 hooks 详解

网络请求场景 – useRequest

useRequest是 ahooks 中最核心的 hooks 之一，用于处理异步请求。

import React from "react";
import { useRequest } from "ahooks";const UserList = () => {const { data, loading, error, run } = useRequest(async () => {const response = await fetch("/api/users");return response.json();},{manual: true, // 手动触发onSuccess: (result) => {console.log("请求成功:", result);},onError: (error) => {console.log("请求失败:", error);},});return (<div><button onClick={run} disabled={loading}>{loading ? "加载中..." : "获取用户列表"}</button>{error && <div>错误: {error.message}</div>}{data && (<ul>{data.map((user) => (<li key={user.id}>{user.name}</li>))}</ul>)}</div>);
};

高级特性

// 轮询请求
const { data } = useRequest(fetchUserData, {pollingInterval: 3000, // 每3秒轮询一次pollingWhenHidden: false, // 页面隐藏时停止轮询
});// 防抖请求
const { data } = useRequest(searchUsers, {debounceWait: 500, // 500ms防抖
});// 缓存请求
const { data } = useRequest(fetchUserData, {cacheKey: "userData",staleTime: 5 * 60 * 1000, // 5分钟内数据不重新请求
});

表单场景 – useAntdTable

useAntdTable用于处理表格与表单的联动场景。

import React from "react";
import { useAntdTable } from "ahooks";
import { Form, Input, Button, Table } from "antd";const UserTable = () => {const [form] = Form.useForm();const { tableProps, search } = useAntdTable(async (params, form) => {const { current, pageSize } = params;const response = await fetch("/api/users", {method: "POST",body: JSON.stringify({page: current,size: pageSize,...form,}),});const data = await response.json();return {list: data.list,total: data.total,};},{form,defaultPageSize: 10,});return (<div className="container m-4"><Form form={form} layout="inline" className="mb-2"><Form.Item name="name" label="姓名"><Input placeholder="请输入姓名" /></Form.Item><Form.Item name="email" label="邮箱"><Input placeholder="请输入邮箱" /></Form.Item><Form.Item><Button type="primary" onClick={search.submit}>搜索</Button><Button onClick={search.reset} style={{ marginLeft: 8 }}>重置</Button></Form.Item></Form><Table{...tableProps}columns={[{ title: "姓名", dataIndex: "name" },{ title: "邮箱", dataIndex: "email" },{ title: "创建时间", dataIndex: "createTime" },]}/></div>);
};

状态管理场景 – useLocalStorageState

useLocalStorageState用于在 localStorage 中持久化状态。

import React from "react";
import { useLocalStorageState } from "ahooks";const ThemeSwitcher = () => {const [theme, setTheme] = useLocalStorageState("theme", {defaultValue: "light",serializer: (value) => JSON.stringify(value),deserializer: (value) => JSON.parse(value),});return (<div><p>当前主题: {theme}</p><button onClick={() => setTheme("light")}>浅色主题</button><button onClick={() => setTheme("dark")}>深色主题</button></div>);
};

生命周期场景 – useMount & useUnmount

import React from "react";
import { useMount, useUnmount } from "ahooks";const UserProfile = () => {useMount(() => {console.log("组件挂载，开始获取用户信息");// 初始化逻辑});useUnmount(() => {console.log("组件卸载，清理资源");// 清理逻辑});return <div>用户信息</div>;
};

事件处理场景 – useEventListener

import React, { useState } from "react";
import { useEventListener } from "ahooks";const KeyboardListener = () => {const [key, setKey] = useState("");useEventListener("keydown", (event) => {setKey(event.key);});return (<div><p>按下的键: {key}</p></div>);
};

工具类场景 – useDebounce & useThrottle

import React, { useState } from "react";
import { useDebounce, useThrottle } from "ahooks";const SearchComponent = () => {const [value, setValue] = useState("");const debouncedValue = useDebounce(value, 500);const throttledValue = useThrottle(value, 1000);return (<div><inputvalue={value}onChange={(e) => setValue(e.target.value)}placeholder="输入搜索内容"/><p>原始值: {value}</p><p>防抖值: {debouncedValue}</p><p>节流值: {throttledValue}</p></div>);
};

媒体查询场景 – useResponsive

import React from "react";
import { useResponsive } from "ahooks";const ResponsiveComponent = () => {const responsive = useResponsive();return (<div><p>屏幕尺寸信息:</p><ul><li>xs: {responsive.xs ? "是" : "否"}</li><li>sm: {responsive.sm ? "是" : "否"}</li><li>md: {responsive.md ? "是" : "否"}</li><li>lg: {responsive.lg ? "是" : "否"}</li><li>xl: {responsive.xl ? "是" : "否"}</li></ul></div>);
};

滚动场景 – useScroll

import React from "react";
import { useScroll } from "ahooks";const ScrollComponent = () => {const scroll = useScroll(document);return (<div style={{ height: "200vh" }}><div style={{ position: "fixed", top: 0, left: 0 }}><p>滚动位置: {scroll?.left || 0}, {scroll?.top || 0}</p><p>滚动方向: {scroll?.direction || "none"}</p></div></div>);
};