大家都能看得懂的源码之ahooks useInfiniteScroll

最新推荐文章于 2023-10-24 21:33:01 发布
最新推荐文章于 2023-10-24 21:33:01 发布
阅读量557 收藏
点赞数
分类专栏： 11 文章标签： flask python 后端 计算机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012804784/article/details/126697224
版权
本文深入浅出地解析ahooks库中的useInfiniteScroll钩子，介绍了其实现原理和具体代码实现。利用useRequest进行后台数据请求，结合scroll事件监听实现滚动自动加载更多功能。重点探讨了如何判断滚动到底部的逻辑，并解释了相关CSS属性如scrollTop、scrollHeight和clientHeight的作用。
摘要由CSDN通过智能技术生成

🚀 优质资源分享 🚀

学习路线指引（点击解锁） 知识定位 人群定位
🧡 Python实战微信订餐小程序 🧡 进阶级 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

本文是深入浅出 ahooks 源码系列文章的第十七篇，该系列已整理成文档-地址。觉得还不错，给个 star 支持一下哈，Thanks。

简介

useInfiniteScroll 封装了常见的无限滚动逻辑。

详细可看官网

注意：这里的无限滚动指的是常见的点击加载更多或者说下拉加载更加功能，而不是虚拟滚动，虚拟滚动后面会讲到。

实现原理

实现原理：

最低0.47元/天 解锁文章
u012804784
关注
专栏目录
前端技术搭建飞机大战小游戏（内含源码）
官方推荐
05-11 7万+
上周我们实通过前端基础实现了弹珠游戏，当然很多伙伴再评论区提出了想法，后续我们会考虑实现的，今天还是继续按照我们原定的节奏来带领大家完成一个飞机大战游戏，功能也比较简单简单，也是想借助这样一个简单的功能，然后来帮助大家了解我们JavaScript在前端中的作用， 在前面的文章当中我们也提及到我们在本系列的专栏是循序渐进从简单到复杂的过程，后续会带领大家用前端实现翻卡片、扫雷、贪吃蛇等有趣的小游戏，纯前端语言实现，都会陆续带给大家。欢迎大家订阅我们这份前端小游戏的专栏。
前端技术搭建弹珠小游戏（内附源码）
热门推荐
官方推荐
05-08 7万+
上周我们实通过前端基础实现了小人逃脱，当然很多伙伴再评论区提出了想法，后续我们会考虑实现的，今天还是继续按照我们原定的节奏来带领大家完成一个弹珠游戏，功能也比较简单简单，也是想借助这样一个简单的功能，然后来帮助大家了解我们JavaScript在前端中的作用， 在前面的文章当中我们也提及到我们在本系列的专栏是循序渐进从简单到复杂的过程，后续会带领大家用前端实现翻卡片、扫雷、贪吃蛇等有趣的小游戏，纯前端语言实现，都会陆续带给大家。欢迎大家订阅我们这份前端小游戏的专栏。
React 滚动加载--ahooks--useInfiniteScroll
qq_44638443的博客
11-26 1973
React 滚动加载--ahooks--useInfiniteScroll
AHooks无限滚动useInfiniteScroll使用
张兴华的博客
05-31 3510
useInfiniteScroll 封装了常见的无限滚动逻辑。假如第一次请求返回数据为 { list: [1, 2, 3] }, 第二次返回的数据为 { list: [4, 5, 6] }, 则我们会自动合并 list，整合后的的 data 为 { list: [1, 2, 3, 4, 5, 6] }。注：这里官方说了对于返回的字段是list，才会帮你进行合并，所以可以跟后端的同学商量返回的数组数据用list做属性名，或者你也可以拿到后端的数据自己生成list属性名。
大家都能看得懂的源码（一）ahooks 整体架构篇
fgp_123的博客
06-26 647
本文是深入浅出 ahooks 源码系列文章的第一篇，这个系列的目标主要有以下几点： 加深对 React hooks 的理解。学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库。培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。 注：本系列对 ahooks 的源码解析是基于 v3.3.13。自己 folk 了一份源码，主要是对源码做了一些解读，可见 详情[1]。 第一篇主要介绍 ahooks 的背景以及整体架构。 React hooks utils 库 自从 React
use-infinite-scroll:超级简单的React钩子，可基于IntersectionObserver API创建无限滚动体验
05-14
使用无限滚动 超级简单的React钩子，可基于IntersectionObserver API创建无限滚动体验。 。 有兴趣从事这样的项目吗？ 正在寻找加入我们的团队！ 安装 yarn add @closeio/use-infinite-scroll 好处 极其轻巧（压缩后不到1KB）。 它使用IntersectionObserver API，因此不需要侦听scroll事件， scroll事件已知会导致性能问题。 没有其他第三方依赖。 用法 import React from 'react' ; import useInfiniteScroll from '@closeio/use-infinite-scroll' ; export default function MyComponent ( ) { const [ items , setItems ] = useState
【解读 ahooks 源码系列】DOM篇（一）
xxxzzzqqq_的博客
03-16 274
由此可以知道当前文档 (即为页面) 是在背后，或是不可见的隐藏的标签页，或者 (正在) 预渲染，共有三个可能的值。比如点击显示弹窗之后，此时点击弹窗之外的任意区域时（如弹窗的全局蒙层），该弹窗要自动隐藏。简而言之，属于"点击页面其他元素，XX组件自动关闭"的功能。在 drop 和 paste 事件中，获取到 DataTransfer 数据并传给 onData 方法，根据数据类型进行特定的处理。通用事件监听 Hook，简化写法（无需在 useEffect 卸载函数中手动移除监听函数，由内部去移除）
java源码包---java 源码 大量 实例
04-18
　Java 3DMenu 界面源码，有人说用到游戏中不错，其实平时我信编写Java应用程序时候也能用到吧，不一定非要局限于游戏吧，RES、SRC资源都有，都在压缩包内。 Java zip压缩包查看程序源码 1个目标文件 摘要:Java源码...
198个经典C#WinForm实例源码 超赞的完整版
07-14
"198个经典C#WinForm实例源码"包括： 1-窗体技巧 2-控件操作 3-图像操作 4-报表打印 5-系统操作 6-文件处理 7-网络操作 8-数据库操作 9-加密解密 10-硬件读写 11-游戏设计 "超赞的198个经典C#WinForm实例源码.zip " ...
【Nacos源码之配置管理 八】客户端怎么获取服务端集群列表
石臻臻的杂货铺(szzdzhp001)
09-05 1万+
前言 在前面第六篇文章中,我们介绍了配置管服务端模块的ServerListService类; 这个类作用是持有服务端集群列表信息,并且每隔一段时间就会去检查集群中的机器是否正常; ServerListService类获取集群列表方式是先获取本地文件配置,如果没有配置则检查是否配置了远程服务器配置列表;具体详细可以查看文章 【Nacos源码之配置管理 六】集群模式下服务器之间是如何互相感知的 ;...
React-hooks
03-07
React-hooks
【解读 ahooks 源码系列】DOM篇（二）
xxxzzzqqq_的博客
03-16 359
【解读 ahooks 源码系列】DOM篇（一）本文主要解读useTitleuseFaviconuseHover源码实现。
从看ahooks源码说起：源码准备阶段
weixin_43867717的博客
08-10 332
pnpm是 Node.js 的替代包管理器。它是 npm 的直接替代品，但速度更快、效率更高。为什么效率更高？当您安装软件包时，我们会将其保存在您机器上的全局存储中，然后我们会从中创建一个硬链接，而不是进行复制。对于模块的每个版本，磁盘上只保留一个副本。例如，当使用 npm 或 yarn 时，如果您有 100 个使用 lodash 的包，则磁盘上将有 100 个 lodash 副本。pnpm 可让您节省数 GB 的磁盘空间！...
我写了 ahooks 源码分析系列，收到官方邀请我一起维护，这是一次提 PR 的记录...
u012384510的博客
07-27 445
大家好，我是若川。持续组织了近一年的源码共读活动，感兴趣的可以加我微信ruochuan12参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信进群。本文是深入浅出 ahooks 源码系列文章的第八篇，这个系列的目标主要有以下几点：加深...
【Vue3】利用VueUse实现useInfiniteScroll虚拟滚动操作
最新发布
m0_64373473的博客
10-24 1575
理解虚拟滚动的实现原理以及vueuse这一第三方功能类库的基本情况 才能更好的将其结合实现虚拟滚动操作
useInfiniteScroll --- react滚动加载
weixin_40381947的博客
09-11 1392
useInfiniteScroll还允许我们传递一些自定义选项来定制其行为。例如，我们可以指定滚动触发距离、初始状态等等。threshold：表示窗口底部距离下一个请求所需的像素数，默认值为0。hasMore：表示数据是否还有更多，如果设置为false，则不会再触发加载事件。loader：表示正在加载数据时显示的组件。useCapture：表示是否在捕获阶段执行事件，默认为false。除此之外，还可以自定义每次加载数据时所需要传递的参数、请求头、请求方法等。
hooks中useEffect()使用总结
庚中
11-26 3万+
常见使用: 获取数据案例: import React, { useState, useEffect } from 'react'; import axios from 'axios'; function App() { const [data, setData] = useState({ hits: [] }); useEffect(() => { const fetchData = async () => { const result = await axios
关于 elementUI 中InfiniteScroll无限滚动 如何使用
Technology_hands的博客
01-05 678
然后按着官网的方法即可使用。
ahooks.js：一款强大的React Hooks库及其API使用教程（二）
weixin_42662753的博客
08-17 3512
ahooks是一款由阿里巴巴开发团队设计的React Hooks库，提供了一系列实用的React Hooks，以便开发者更好地使用React的功能。ahooks的设计原则是“最小API，最大自由”，旨在提供最小的、最易于理解和使用的API，同时保留最大的使用自由度。ahooks.js：一款强大的React Hooks库及其API使用教程（一）
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值