什么是 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>
<input
value={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>
);
};总结
ahooks 的场景类 hooks 为 React 开发提供了强大的工具集，能够显著提升开发效率：
- useRequest: 处理异步请求的完整解决方案
- useFormTable: 表格与表单联动的便捷工具
- useLocalStorageState: 状态持久化
- useMount/useUnmount: 生命周期管理
- useEventListener: 事件监听
- useDebounce/useThrottle: 性能优化
- useResponsive: 响应式设计
- useScroll: 滚动处理
通过合理使用这些 hooks，可以大大简化 React 应用的开发复杂度，提高代码的可维护性和用户体验。