ahooks源码

本文来看下 ahooks 针对常见的业务场景做了哪些封装。通过对这些 hook 的分析和思考，希望能够给大家在日常工作中遇到的场景有所帮助~

useVirtualList 提供虚拟化列表能力的 Hook，用于解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿问题。

useInfiniteScroll 封装了常见的无限滚动逻辑。这里的无限滚动指的是常见的点击加载更多或者说下拉加载更加功能，而不是虚拟滚动

典型的列表页包括筛选表单项、Table表格、Pagination分页这三部分。在 ahooks 中主要是通过 useAntdTable 和 usePagination 这两个 hook 来封装。

本文是深入浅出 ahooks 源码系列文章的第十五篇。本篇接着针对关于 DOM 的各个 Hook 封装进行解读。

上一篇我们探讨了 ahooks 对 DOM 类 Hooks 使用规范，以及源码中是如何去做处理的。接下来我们就针对关于 DOM 的各个 Hook 封装进行解读。

一个优秀的工具库应该有自己的一套输入输出规范，一来能够支持更多的场景，二来可以更好的在内部进行封装处理，三来使用者能够更加快速熟悉和使用相应的功能，能做到举一反三。

React 的 function Component 的状态管理还是比较灵活，我们可以针对一些场景进行封装和优化，从而更优雅的管理我们的 state 状态

通过 url query 来管理 state 的 Hook。可以从官网以及源码中看到 useUrlState 是独立一个仓库进行管理的。为什么呢？

现在越来越多的场景使用了 Map 和 Set，ahooks 对这两者的封装都比较简单，更多的是一些有副作用（修改到原 Map 和 Set）操作的封装。看这部分的源码，就当做小小复习基础知识吧。

对 cookie/localStorage/sessionStorage 的封装是我们经常需要去做的，ahooks 的封装整体比较简单，大家可以参考借鉴。

给开源项目提 PR 操作过程不是一件很复杂的事情，重点在于需求的修改。往往需要考虑到多种边界场景，这个时候，我们就需要前端的单元测试来帮助我们覆盖全面的场景。

关于定时器，我们平时用得不少，但经常有同学容易忘记清除定时器，结合 useEffect 返回清除副作用函数这个特性，我们可以将这类逻辑一起封装到 hook 中，让开发者使用更加方便。

ahooks 是基于 useEffect/useLayoutEffect 封装了常见的代码执行时机，使用这些 hook，可以让我们的代码更加具有可读性以及逻辑更加清晰。

通过类似 useLockFn 这样的 hook或方法给请求函数添加竞态锁的方式解决重复请求的问题。通过 axios 拦截器以及其 CancelToken 功能，我们能够在拦截器中自动将已发的请求取消。

React 自从引入 hooks，虽然解决了 class 组件的一些弊端，比如逻辑复用需要通过高阶组件层层嵌套等。但是也引入了一些问题，比如闭包问题。

useRequest 是一个强大的异步数据管理的 Hooks，React 项目中的网络请求场景使用 useRequest 就够了。useRequest 通过插件式组织代码，核心代码极其简单

ahooks，是一套高质量可靠的 React Hooks 库。在当前 React 项目研发过程中，一套好用的 React Hooks 库是必不可少的。