本文是深入浅出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中对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是更优的选择，以下是一些常见的
本文是深入浅出ahooks源码系列文章的第十二篇，该系列已整理成文档-地址。觉得还不错，给个star支持一下哈，Thanks。今天我们来聊聊ahooks中那些可以帮助我们更优雅管理我们state（状态）的那些hook。一些比较特殊的，比如cookie/localStorage/sessionStorage，useUrlState等，我们已经单独拿出来细讲了，感兴趣可以看看笔者的历史文章。useSetState管理object类型state的Hooks，用法与class组件的this.setState基本一致。先来了解一下可变数据和不可变数据的含义和区别如下：可变数据(mutable)即一个数据
本文是深入浅出ahooks源码系列文章的第十二篇，该系列已整理成文档-地址。觉得还不错，给个star支持一下哈，Thanks。今天我们来聊聊ahooks中那些可以帮助我们更优雅管理我们state（状态）的那些hook。一些比较特殊的，比如cookie/localStorage/sessionStorage，useUrlState等，我们已经单独拿出来细讲了，感兴趣可以看看笔者的历史文章。useSetState管理object类型state的Hooks，用法与class组件的this.setState基本一致。先来了解一下可变数据和不可变数据的含义和区别如下：可变数据(mutable)即一个数据
