useInfiniteScroll 封装了常见的无限滚动逻辑。,详细可看官网[3],注意：这里的无限滚动指的是常见的点击加载更多或者说下拉加载更加功能，而不是虚拟滚动，虚拟滚动后面会讲到。,实现原理：使用了 useRequest[4] hook 负责进行请求后台数据。其中 reloadAsync 对应 useRequest 的 runAsync，reload 对应 useRequest 的 run。前者返回 Promise，需要自行处理异常。后者内部已经做了异常处理。,另外假如传入 target 和 isNoMore 参数，通过监听 scroll 事件，判断是否滚动到指定的位置（支持设置 threshold 值-距离底部距离阈值），进行自动发起加载更多请求，从而实现滚动自动加载效果。,大概说完原理，来看代码。,入参以及状态定义，可以直接看注释：,判断是否有数据：isNoMore 的入参是当前聚合后的 data。,通过 useRequest 处理请求，可以看到 onBefore、onSuccess、onError、onFinally、manual 等参数都是直接传到了 useRequest 中。,loadMore/loadMoreAsync 和 reload/reloadAsync 分别对应调用的是 useRequest 的 run 和 runAsync 函数。,并且当 reloadDeps 依赖发生变化的时候，会触发 reload，进行重置：,最后就是滚动自动加载的逻辑，通过 scrollHeight - scrollTop <= clientHeight + threshold 结果判断是否触底。,上面提到的三个重要的值 scrollTop，scrollHeight，clientHeight 对应的值分别为以下结果：,scrollTop[5],Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为 0。,scrollHeight[6],Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为 0。,clientHeight[7],这个属性是只读属性，对于没有定义 CSS 或者内联布局盒子的元素为 0，否则，它是元素内部的高度 (单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在) 来计算。,本文已收录到个人博客[8]中。,参考资料,[1]地址: https://gpingfeng.github.io/ahooks-analysis/,[2] star: https://github.com/GpingFeng/ahooks-analysis,[3]官网: https://ahooks.gitee.io/zh-CN/hooks/use-infinite-scroll,[4]useRequest: https://ahooks.gitee.io/zh-CN/hooks/use-request/index,[5]scrollTop: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop,[6]scrollHeight: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight,[7]clientHeight: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight,[8]博客: https://github.com/GpingFeng/gopal-blog
© 版权声明
文章版权归作者所有，未经允许请勿转载。
">