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 可以帮助减少不必要的渲染。最佳实践按需引入只引入需要的 Hook避免打包体积过大。理解 Hook 的依赖项合理设置依赖数组避免不必要的重新执行。错误处理使用useRequest的错误处理机制提供更好的用户体验。组合使用多个 Hook 可以组合使用实现更复杂的功能。自定义扩展基于 ahooks 的 Hook 进行二次封装满足特定业务需求。资源与社区官方文档ahooks.js.org - 包含详细的 API 文档、示例和指南GitHub 仓库alibaba/hooks - 开源代码可以提交 issue 和 PR常见自定义 Hook 表格以下是一些常见的自定义 Hook整理成表格说明它们的意义和使用方法Hook 名称意义使用方法适用场景useToggle用于切换布尔状态简化开关逻辑const [isOn, { toggle, set, setLeft, setRight }] useToggle(false)开关、显示/隐藏、模式切换useDebounce对输入值进行防抖处理避免频繁触发回调const debouncedValue useDebounce(value, 500)搜索框输入、窗口大小调整、滚动事件useLocalStorage将状态同步到localStorage实现持久化存储const [name, setName] useLocalStorage(name, )用户偏好设置、表单数据持久化useWindowSize获取窗口尺寸响应窗口变化const { width, height } useWindowSize()响应式布局、移动端适配useRequest封装数据请求逻辑简化异步操作const { loading, data, error, run } useFetch(url, options)API 调用、数据获取、表单提交usePrevious保存上一次的状态值便于比较前后变化const prevCount usePrevious(count)状态变化追踪、动画效果、性能优化useClickOutside检测点击事件是否发生在目标元素外部常用于关闭弹窗useClickOutside(() setIsOpen(false), [isOpen])下拉菜单、模态框、弹出层useHover检测鼠标悬停状态const [isHovered, bind] useHover()交互反馈、Tooltip、高亮效果useTimeout封装setTimeout逻辑自动清理定时器useTimeout(() alert(Done!), 1000)延迟执行、倒计时、轮询useScrollPosition获取滚动位置监听页面滚动const scrollY useScrollPosition()无限滚动、回到顶部、阅读进度useKeyPress监听键盘按键事件useKeyPress(Enter, callback)快捷键、表单提交、游戏控制useNetwork获取网络连接状态const networkState useNetwork()离线提示、网络状态检测useTitle动态修改页面标题useTitle(新标题)SPA 页面标题管理、通知提醒示例代码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 typetext 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 valuelight浅色/option option valuedark深色/option option valueauto自动/option /select /div /div ); }