本文是深入浅出ahooks源码系列文章的第十八篇，该系列已整理成文档-地址。觉得还不错，给个star支持一下哈，Thanks。简介提供虚拟化列表能力的Hook，用于解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿问题。详情可见官网，文章源代码可以点击这里。实现原理其实现原理监听外部容器的scroll事件以及其size发生变化的时候，触发计算逻辑算出内部容器的高度和marginTop值。具体实现其监听滚动逻辑如下：//当外部容器的size发生变化的时候，触发计算逻辑useEffect(()=>{if(!size?.width||!size?.height){return;}//重新计算逻辑calcu
本文是深入浅出ahooks源码系列文章的第十八篇，该系列已整理成文档-地址。觉得还不错，给个star支持一下哈，Thanks。简介提供虚拟化列表能力的Hook，用于解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿问题。详情可见官网，文章源代码可以点击这里。实现原理其实现原理监听外部容器的scroll事件以及其size发生变化的时候，触发计算逻辑算出内部容器的高度和marginTop值。具体实现其监听滚动逻辑如下：//当外部容器的size发生变化的时候，触发计算逻辑useEffect(()=>{if(!size?.width||!size?.height){return;}//重新计算逻辑calcu
本文是深入浅出ahooks源码系列文章的第十七篇，该系列已整理成文档-地址。觉得还不错，给个star支持一下哈，Thanks。简介useInfiniteScroll封装了常见的无限滚动逻辑。详细可看官网注意：这里的无限滚动指的是常见的点击加载更多或者说下拉加载更加功能，而不是虚拟滚动，虚拟滚动后面会讲到。实现原理实现原理：使用了useRequesthook负责进行请求后台数据。其中reloadAsync对应useRequest的runAsync，reload对应useRequest的run。前者返回Promise，需要自行处理异常。后者内部已经做了异常处理。另外假如传入target和isNoM
本文是深入浅出ahooks源码系列文章的第十七篇，该系列已整理成文档-地址。觉得还不错，给个star支持一下哈，Thanks。简介useInfiniteScroll封装了常见的无限滚动逻辑。详细可看官网注意：这里的无限滚动指的是常见的点击加载更多或者说下拉加载更加功能，而不是虚拟滚动，虚拟滚动后面会讲到。实现原理实现原理：使用了useRequesthook负责进行请求后台数据。其中reloadAsync对应useRequest的runAsync，reload对应useRequest的run。前者返回Promise，需要自行处理异常。后者内部已经做了异常处理。另外假如传入target和isNoM
本文是深入浅出ahooks源码系列文章的第九篇，该系列已整理成文档-地址。觉得还不错，给个star支持一下哈，Thanks。今天来看看ahooks是怎么封装cookie/localStorage/sessionStorage的。cookieahooks封装了useCookieState，一个可以将状态存储在Cookie中的Hook。该hook使用了js-cookie这个npm库。我认为选择它的理由有以下：包体积小。压缩后小于800字节。自身是没有其它依赖的。这对于原本就是一个工具库的ahooks来讲是很重要的。更好的兼容性。支持所有的浏览器。并支持任意的字符。当然，它还有其他的特点，比如支持E
本文是深入浅出ahooks源码系列文章的第九篇，该系列已整理成文档-地址。觉得还不错，给个star支持一下哈，Thanks。今天来看看ahooks是怎么封装cookie/localStorage/sessionStorage的。cookieahooks封装了useCookieState，一个可以将状态存储在Cookie中的Hook。该hook使用了js-cookie这个npm库。我认为选择它的理由有以下：包体积小。压缩后小于800字节。自身是没有其它依赖的。这对于原本就是一个工具库的ahooks来讲是很重要的。更好的兼容性。支持所有的浏览器。并支持任意的字符。当然，它还有其他的特点，比如支持E
本文是深入浅出ahooks源码系列文章的第十四篇，该系列已整理成文档-地址。觉得还不错，给个 star 支持一下哈，Thanks。上一篇我们探讨了ahooks对DOM类Hooks使用规范，以及源码中是如何去做处理的。接下来我们就针对关于DOM的各个Hook封装进行解读。useEventListener优雅的使用addEventListener。我们先来看看addEventListener的定义，以下来自MDN文档：EventTarget.addEventListener()方法将指定的监听器注册到EventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行。这里的EventTa
本文是深入浅出ahooks源码系列文章的第十四篇，该系列已整理成文档-地址。觉得还不错，给个 star 支持一下哈，Thanks。上一篇我们探讨了ahooks对DOM类Hooks使用规范，以及源码中是如何去做处理的。接下来我们就针对关于DOM的各个Hook封装进行解读。useEventListener优雅的使用addEventListener。我们先来看看addEventListener的定义，以下来自MDN文档：EventTarget.addEventListener()方法将指定的监听器注册到EventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行。这里的EventTa
本文是深入浅出ahooks源码系列文章的第十篇，该系列已整理成文档-地址。觉得还不错，给个 star 支持一下哈，Thanks。今天我们来聊聊ahooks中对Map和Set类型进行状态管理的hook，顺便复习一下Set和Map这两种数据类型。useMap管理Map类型状态的Hook。先回顾以下Map的概念。Map对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。Object和Map很类似。它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值。因此过去我们一直都把对象当成Map使用。但是，在一些场景下，使用Map是更优的选择，以下是一些常见的
本文是深入浅出ahooks源码系列文章的第十篇，该系列已整理成文档-地址。觉得还不错，给个 star 支持一下哈，Thanks。今天我们来聊聊ahooks中对Map和Set类型进行状态管理的hook，顺便复习一下Set和Map这两种数据类型。useMap管理Map类型状态的Hook。先回顾以下Map的概念。Map对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。Object和Map很类似。它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值。因此过去我们一直都把对象当成Map使用。但是，在一些场景下，使用Map是更优的选择，以下是一些常见的
