--- highlight: a11y-dark --- # 一.什么是ahooks > ahooks是由阿里的前端团队开发，它是基于React Hooks 的工具库，致力提供常用且高质量的 Hooks，hooks的创建使得构建 React 组件时不再需要定义class类。从开发中得到证明，很早之前，React中使用的类架构，随着项目结构的庞大，类组件的维护让我们的开发变得繁琐。经常发现自己在编写难以分解的大型复杂组件，并且组件之间极度耦合，很难再去拆分成小组件，而且相关代码分布在多个生命周期方法中，使得阅读、维护和测试变得格外棘手。此外，我们还必须绑定方法以this确保可以在组件中访问到this。在处理高阶组件时会遇到过多的 prop 钻孔问题——也称为包装器地狱。由此，hooks在前端react开发中渐渐兴起，阿里的开发团队将在开发中使用的hooks进行封装,最终得到了一套完整的hooks类库，这便是ahooks的由来。 > ahooks 的前身是蚂蚁开源的 [@umijs/hooks](https://link.zhihu.com/target=https%3A//github.com/umijs/hooks)，可以说 ahooks 是 umi hooks 的 2.0 版本。 # 二.学习文档 - [ahooks官网](https://ahooks.js.org/zh-CN/) - [ahooks阿里社区](https://developer.aliyun.com/article/768059) - [Umi Hooks- 助力拥抱 React Hooks ](https://zhuanlan.zhihu.com/p/103150605) - [ahooks源码](https://github1s.com/alibaba/hooks) # 三.ahooks安装 ## 3.1 下载 > npm i ahooks 或者 yarn add ahooks ## 3.2 按需加载可以通过以下的写法来按需加载 Hooks。 ``` import useToggle from 'ahooks/es/useToggle'; ``` > 注意：ahooks 默认支持基于 ES module 的 tree shaking，对于 js 部分，直接引入 `import { useToggle } from 'ahooks'` 也会有按需加载的效果。如果你使用了 babel，那么可以使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 来进行按需加载，加入这个插件后。你可以仍然这么写： ``` import { useToggle } from 'ahooks'; ``` 插件会帮你转换成 `ahooks/es/useToggle` 的写法。 # 四.基本使用 ## 4.1 简单案例 > 以下是使用useToggle这个hooks对文字的切换案例 ```js import React from 'react' import { useToggle } from "ahooks"; const Index = (props) => { const [state, { toggle }] = useToggle(); return ( <> { state?

显示

隐藏

}

) } export default Index ``` # 五.常用hooks ## 5.1 useRequest > 这个hooks使用于发送请求，使用过umi的小伙伴知道，umi中发送请求就是使用的useRequest **它具有以下特性：** - 自动请求/手动请求 - SWR(stale-while-revalidate) - 缓存/预加载 - 屏幕聚焦重新请求 - 轮询 - 防抖 - 节流 - 并行请求 - 依赖请求 - loading delay - 分页 - 加载更多，数据恢复 + 滚动位置恢复在下面这个例子中， useRequest 接收了一个异步函数 `getSome` ，在组件初次加载时，自动触发该函数执行。同时 useRequest 会自动管理异步请求的 `loading` , `data` , `error` 等状态。 ```js import {useRequest } from 'ahooks'; const getSome = async () => {}; const { data, loading, run } = useRequest(getSome, { debounceInterval: 500, manual: true, 　 refreshDeps: [], // manual为false，可以按被动式触发 }); ``` ## 5.2 缓存hooks ### 5.2.1 useCookieState ```js import { useCookieState } from 'ahooks'; const [message, setMessage] = useCookieState('cookie-key'); setMessage(e.target.value)} /> ``` ### 5.2.2 useLocalStorageState ```js import { useLocalStorageState } from 'ahooks'; const [message, setMessage] = useLocalStorageState('store-key', 'default value'); setMessage(e.target.value)} /> ``` ### 5.2.3 useSessionStorageState ```js import { useSessionStorageState } from 'ahooks'; const [message, setMessage] = useSessionStorageState('store-key', 'default-value'); { setMessage(e.target.value); }} /> ``` ## 5.3 性能优化hooks ### 5.3.1 useCreation > 它是用来代替useMemo、useRef的钩子，因为useMemo不能保证一定不会被重新计算,useRef如果针对复杂对象，每次渲染都创建一次会很耗性能 ```js import { useCreation } from 'ahooks'; const foo = useCreation(() => {number: Math.random()}, []); ``` ### 5.3.2 useDebounceFn > 这个钩子用于防抖 ```js import { useDebounceFn } from 'ahooks'; const { run } = useDebounceFn( () => console.log('test'), { wait: 500 }, );

``` ### 5.3.3 useThrottleFn > 这个钩子用于节流 ```js import { useThrottleFn } from 'ahooks'; const { run } = useThrottleFn( () => console.log('test'), { wait: 500 }, );

``` ### 5.3.4 useInterval > 这个钩子与定时器功能一致 ```js import { useInterval } from 'ahooks'; const [count, setCount] = useState(0); useInterval(() => { setCount(count + 1); }, 1000);

数字: {count}

``` ### 5.3.5 useVirtualList > 提供虚拟化列表能力的 Hook，用于解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿问题。 ```js import { useVirtualList } from 'ahooks'; const { list, containerProps, wrapperProps } = useVirtualList(Array.from(Array(99999).keys()), { overscan: 30, // 视区上、下额外展示的 dom 节点数量 itemHeight: 60, // 行高度，静态高度可以直接写入像素值，动态高度可传入函数 }); ``` ## 5.4 操作DOM的hooks ### 5.4.1 useClickAway > 这个钩子可以确定一个区域，当鼠标点击区域外触发，可以做一些点击区域外的操作 ```js import React,{useRef} from 'react' import { useClickAway } from 'ahooks'; const Index=(props)=> { const ref = useRef(); useClickAway(() => { console.log('点击到div外部了') }, ref); return(

这是一个区域内

) } export default Index ``` ### 5.4.2 useDocumentVisibility > 可以获取页面的可见状态，并且监听document 的可见状态 ```js import React,{useEffect} from 'react' import { useDocumentVisibility } from 'ahooks'; const documentVisibility = useDocumentVisibility(); useEffect(() => { if (documentVisibility === 'visible') { console.log('当前页面在可见状态'); } else { console.log('当前页面不在可见状态'); } }, [documentVisibility]); ``` ### 5.4.3 useEventListener > 这个钩子类似于dom操作中的addEventListener，可以给dom元素绑定事件 **这个钩子可以传递三个参数** | 参数 | 说明 | 类型 | 默认值 | |-----------|------------|------------|--------| | eventName | 事件名称 | `string` | - | | handler | 处理函数 | `Function` | - | | options | 设置(可选) | `Options` | - | > 在它的源码中是这么绑定元素的，也是利用了addEventListener ```js targetElement.addEventListener(eventName, eventListener, { capture: options.capture, once: options.once, passive: options.passive, }); ``` **使用** ```js import React, { useState, useRef } from 'react' import { useEventListener } from 'ahooks'; const Index = (props) => { const [value, setValue] = useState(0); const clickHandler = () => { setValue(value + 1); }; const ref = useRef(); useEventListener('click', clickHandler, { target: ref }); const style = { width: '100px', height: '100px', background: 'red', lineHeight: '100px', textAlign: 'center' } return ( <>

这是一个数字：{value}

加一

) } export default Index ``` ### 5.4.4 useInViewport > 这个钩子可以观测到目标元素是否在可视范围内 ```js import { useInViewport } from 'ahooks'; const ref = useRef(); const inViewPort = useInViewport(ref);

{inViewPort ? 'div在可视区' : 'div不在可视区'}

``` 在源码中它首先使用了一个getBoundingClientRect观察目标元素得到位置，判断它的top,bottom,left,right是否在可视区域内，用IntersectionObserver去监听当目标元素的位置发生变化时，目标元素是否还在可视区域内 ```js //这里使用了 [IntersectionObserver API]，这个api可以自动"观察"元素是否可见 const observer = new IntersectionObserver((entries) => { for (const entry of entries) { if (entry.isIntersecting) { setInViewport(true); } else { setInViewport(false); } } }); observer.observe(el as HTMLElement); return () => { observer.disconnect(); }; }, [target]); ``` ### 5.4.5 useResponsive >这个钩子可以监听浏览器视口的大小,可以做一些屏幕适配功能 ```js import React from 'react' import { configResponsive, useResponsive } from 'ahooks'; const Index=(props)=> { configResponsive({ small: 0, middle: 800, large: 1200, }); const responsive = useResponsive(); return ( <>

改变浏览器视口的大小,判断对错

{Object.keys(responsive).map((key) => (

{key} {responsive[key] ? '✔' : '✘'}

))} ) } export default Index ``` ### 5.4.6 useEventEmitte > 这个钩子是用来实现事件订阅的 ```js import { useEventEmitter } from 'ahooks'; // 事件队列 const focus$ = useEventEmitter(); // 发送 focus$.emit(123); // 订阅 focus$.useSubscription(value => { console.log(value); }); ```