React Hook 浅学 2.0 - 自定义Hook

关于 ahooks 插件

ahooks 是一个高质量的 React Hooks 库，由阿里巴巴团队开发和维护。它提供了大量实用的自定义 Hooks，帮助开发者更高效地构建 React 应用。ahooks 的设计理念是"开箱即用"，通过封装常见的业务场景逻辑，让开发者能够专注于业务实现，而不是重复造轮子。

版本演进：ahooks 目前已经发展到 v3.x 版本，支持 React 16.8+，并全面拥抱 TypeScript。库的 API 设计遵循 React Hooks 的最佳实践，同时提供了丰富的配置选项和扩展能力。

核心功能

ahooks 提供了丰富的 Hooks 分类，包括状态管理、副作用处理、DOM 操作、生命周期、网络请求、UI 交互等。以下是主要分类：

• 状态管理：useSetState、useToggle、useBoolean、useMap、useSet 等
• 副作用处理：useDebounce、useThrottle、useInterval、useTimeout、useUpdateEffect 等
• DOM 操作：useClickAway、useHover、useScroll、useSize、useFullscreen 等
• 网络请求：useRequest（核心 Hook，支持轮询、防抖、节流、缓存等）
• 生命周期：useMount、useUnmount、useUpdate 等
• 工具函数：useMemoizedFn、useLatest、useCreation 等

常见 Hooks 如 useRequest（异步请求管理）、useScroll（滚动监听）、useSize（元素尺寸监听）等，都经过了大量生产环境的验证。

安装与使用

通过 npm 或 yarn 安装 ahooks：

# 使用 npm
npm install ahooks –save
使用 yarn
yarn add ahooks
使用 pnpm
pnpm add ahooks

按需引入：ahooks 支持 Tree Shaking，建议按需引入以减小打包体积：

import { useRequest, useToggle } from 'ahooks';

在 React 组件中使用示例：

import React from 'react';
import { useRequest, useToggle } from 'ahooks';

function UserList() {
// 使用 useRequest 管理异步请求
const { data, loading, error, run } = useRequest(
() => fetch('/api/users').then(res => res.json()),
{
manual: false, // 是否手动触发
onSuccess: (result) => {
console.log('请求成功:', result);
},
onError: (error) => {
console.error('请求失败:', error);
}
}
);

// 使用 useToggle 管理开关状态
const [isVisible, { toggle, setLeft, setRight }] = useToggle(false);

if (loading) return <div>加载中…</div>;
if (error) return <div>加载失败: {error.message}</div>;

return (
<div>
<h1>用户列表</h1>
<button onClick={toggle}>
{isVisible ? '隐藏列表' : '显示列表'}
</button>

{isVisible && (
<ul>
{data?.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
)}
</div>
);
}

export default UserList;

特点与优势

• 开箱即用：封装了常见场景的 Hooks，减少重复代码。每个 Hook 都经过精心设计，API 简洁直观。
• 高性能：内置优化逻辑，避免不必要的渲染。例如 useMemoizedFn 可以持久化函数引用，useCreation 可以替代 useMemo 和 useRef。
• TypeScript 支持：完整的类型定义，提升开发体验。所有 Hook 都有详细的类型提示和文档。
• 模块化设计：按需引入，减小打包体积。支持 Tree Shaking，只打包用到的代码。
• 测试友好：所有 Hook 都提供了完善的单元测试，确保稳定性和可靠性。
• 社区活跃：由阿里巴巴团队维护，定期更新，响应 issue 和 PR 迅速。

适用场景

• 需要快速实现复杂逻辑的 React 项目：ahooks 提供了大量现成的解决方案，可以显著加快开发速度。
• 希望减少自定义 Hooks 开发时间的情况：避免重复造轮子，专注于业务逻辑。
• 团队统一 Hooks 规范，提升代码可维护性：使用统一的 Hooks 库可以保证代码风格一致。
• 需要处理复杂状态管理的应用：ahooks 的状态管理 Hook 可以简化复杂的状态逻辑。
• 需要优化性能的应用：内置的性能优化 Hook 可以帮助减少不必要的渲染。

最佳实践

资源与社区

• 官方文档：ahooks.js.org – 包含详细的 API 文档、示例和指南
• GitHub 仓库：alibaba/hooks – 开源代码，可以提交 issue 和 PR

常见自定义 Hook 表格

以下是一些常见的自定义 Hook，整理成表格说明它们的意义和使用方法：

示例代码

useToggle – 完整示例

import React from 'react';
import { useToggle } from 'ahooks';

function ToggleDemo() {
const [state, { toggle, set, setLeft, setRight }] = useToggle();

return (
<div>
<p>当前状态: {state.toString()}</p>
<button onClick={toggle}>切换</button>
<button onClick={() => set(false)}>设为 false</button>
<button onClick={() => set(true)}>设为 true</button>
<button onClick={setLeft}>设为 false (setLeft)</button>
<button onClick={setRight}>设为 true (setRight)</button>
</div>
);
}

function ToggleWithInitialValue() {
const [isDarkMode, toggleDarkMode] = useToggle(true);

return (
<div>
<p>深色模式: {isDarkMode ? '开启' : '关闭'}</p>
<button onClick={toggleDarkMode}>切换深色模式</button>
</div>
);
}

useDebounce – 搜索框示例

import React, { useState, useEffect } from 'react';
import { useDebounce } from 'ahooks';

function SearchBox() {
const [searchTerm, setSearchTerm] = useState('');
const debouncedSearchTerm = useDebounce(searchTerm, 500);
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(false);

useEffect(() => {
if (debouncedSearchTerm) {
setLoading(true);
setTimeout(() => {
setResults([
`结果 1: ${debouncedSearchTerm}`,
`结果 2: ${debouncedSearchTerm} 相关`,
`结果 3: ${debouncedSearchTerm} 信息`
]);
setLoading(false);
}, 300);
} else {
setResults([]);
}
}, [debouncedSearchTerm]);

return (
<div>
<input
type="text"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
style={{ padding: '8px', width: '300px' }}
/>
{loading && <div>搜索中…</div>}
{results.length > 0 ? (
<ul>
{results.map((result, index) => (
<li key={index}>{result}</li>
))}
</ul>
) : (
debouncedSearchTerm && <div>未找到相关结果</div>
)}
</div>
);
}

export default SearchBox;

useLocalStorage – 用户设置示

import React from 'react';
import { useLocalStorage } from 'ahooks';

function UserSettings() {
// 存储用户偏好
const [theme, setTheme] = useLocalStorage('theme', 'light');
const [fontSize, setFontSize] = useLocalStorage('fontSize', 14);
const [notifications, setNotifications] = useLocalStorage('notifications', true);

return (
<div>
<h2>用户设置</h2>
<div>
主题:
<select
value={theme}
onChange={(e) => setTheme(e.target.value)}
style={{ marginLeft: '10px' }}
>
<option value="light">浅色</option>
<option value="dark">深色</option>
<option value="auto">自动</option>
</select>
</div>
</div>
);
}