前端开发工具【免费下载链接】beautiful-react-hooks A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 项目地址https://gitcode.com/gh_mirrors/be/beautiful-react-hooks点击查看免费下载本篇指南围绕 beautiful-react-hooks 中的useInfiniteScrollHook 展开它接收一个指向任意 HTML 元素的 ref返回一个回调设置函数由你在其中编写加载更多的业务逻辑而滚动监听、触底判断、延迟触发与卸载清理等琐碎工作全部由 Hook 内部完成。读完本文你将掌握该 Hook 的标准用法、delay参数的行为细节以及它从事件绑定到触底判定的完整源码实现链路。一、useInfiniteScroll 解决什么问题根据官方文档 docs/useInfiniteScroll.md 的说明useInfiniteScroll接收一个 HTML Element 引用并返回一个便于为该特定元素处理无限滚动infinite scroll的函数。其设计目标可以归纳为三点为目标元素自动添加无限滚动所需的事件监听器免去手写addEventListener/removeEventListener样板代码在组件卸载时负责清理事件监听器降低应用中出现内存泄漏的风险通过直观、易用的接口简化无限滚动业务逻辑的实现。与基于window滚动位置做分页的方案不同它针对的是任意指定容器元素自身的滚动scroll事件因此特别适合页面中某个固定高度、内部可滚动的列表区域这类场景——这也是官方示例采用maxHeight: 250, overflow: scroll容器演示的原因。二、安装与按路径导入beautiful-react-hooks采用子路径导出subpath exports方式发布每个 Hook 都可以独立按路径导入。以 package.json 中的exports字段为例./useInfiniteScroll对应./useInfiniteScroll: { import: ./dist/esm/useInfiniteScroll.js, require: ./dist/useInfiniteScroll.js, types: ./dist/useInfiniteScroll.d.ts }即同时提供 ESM、CommonJS 两种入口及 TypeScript 类型声明。安装后按下述方式导入即可npm install beautiful-react-hooksimport useInfiniteScroll from beautiful-react-hooks/useInfiniteScroll;这种按需按路径导入的方式意味着你不需要从包根部引入整个库打包工具可以只解析useInfiniteScroll这一条依赖链。三、完整示例可滚动列表 模拟分页加载下面是官方文档给出的完整示例使用了 antd 的List、Alert、Typography组件可替换为任意列表实现演示了初始渲染 40 条数据滚动到底部后延迟拉取下一批数据的典型流程import { useState, useRef } from react; import { Alert, List, Typography } from antd; import useInfiniteScroll from beautiful-react-hooks/useInfiniteScroll; const generateRandomNo () Math.floor(Math.random() * 11) const initialData Array.from({ length: 40 }).map(generateRandomNo) /** * Fake fetch, resolves an array of random numbers * param items * returns {Promiseunknown} */ const fetchMock (items 10) new Promise((resolve) { setTimeout(() { const data Array.from({ length: items }).map(generateRandomNo) resolve(data) }, 1000) }) /** * Uses fetchMock to mimic an inifinite loading * returns {JSX.Element} * constructor */ const TestComponent () { const targetElementRef useRef(); const onInfiniteScroll useInfiniteScroll(targetElementRef); const [isFetching, setIsFetching] useState(false) const [data, setData] useState(initialData) onInfiniteScroll(() { if (!isFetching) { setIsFetching(true) fetchMock() .then((next) setData([...data, ...next])) .finally(() setIsFetching(false)) } }) return ( DisplayDemo titleuseInfiniteScroll div style{{ maxHeight: 250, overflow: scroll }} ref{targetElementRef} div style{{ height: 500, position: relative }} Alert typeinfo messageScroll to load more content / List bordered dataSource{data} renderItem{(_, item) ( List.Item Typography.Text markmock item no: {item}/Typography.Text /List.Item )} / {isFetching ( div style{{ opacity: 0.6, textAlign: center, marginBottom: 20 }} Loading next data... /div )} /div /div /DisplayDemo ); };示例中有三个关键约定值得注意ref 必须传给useInfiniteScroll作为第一个参数滚动监听会绑定到该 ref 指向的 DOM 元素上示例中是那个maxHeight: 250、overflow: scroll的容器返回值的用法是设置回调而非返回回调onInfiniteScroll(yourCallback)的语义是把yourCallback注册为触底时执行的处理器这一点与useState的 setter 类似但不会触发组件重新渲染原因见下文源码分析防重复请求要自己处理示例中用isFetching标志位在回调内部做守卫。官方文档明确提醒useInfiniteScroll本身不替你节流/防抖业务逻辑它只对触底事件内置了一个可配置的delay分页式的节流/防抖应由你自行控制以保证应用行为完全符合你的预期。四、源码实现剖析4.1 函数签名与参数源码位于 src/useInfiniteScroll.ts核心签名如下const useInfiniteScroll TElement extends HTMLElement(ref: RefObjectTElement, delay 300) {ref: RefObjectTElement目标元素的 ref泛型约束为任意HTMLElement子类所以div、section、ul等均可作为滚动容器delay?: number可选默认300ms。触底后并不是立即执行回调而是先清掉未决的定时器、再启动一个delay毫秒的setTimeout最终才调用你注册的回调——本质上是内置的防抖窗口。如果你的数据加载很快或想立即触发可显式传入更小的值甚至0。4.2 ref 合法性校验Hook 开头对 ref 做了防御性检查if (ref !safeHasOwnProperty(ref, current)) { throw new Error(Unable to assign any scroll event to the given ref) }它通过 src/shared/safeHasOwnProperty.ts 判断传入对象是否拥有current属性即形如{ current: ... }的 ref 对象。如果你传入的不是useRef()的返回值而是别的对象会在渲染期直接抛错而不是把错误推迟到运行时静默失败。4.3 滚动监听useEvent passive 监听器 自动清理事件绑定委托给库内的 useEvent 完成const onScroll useEventUIEvent, TElement(ref, scroll, { passive: true })useEvent 在useEffect中对target.current执行addEventListener(scroll, cb, { passive: true })并在 effect 清理函数中对称地removeEventListener。这对应了文档中组件卸载时清理监听器、减少内存泄漏风险的承诺卸载或target.current变化时旧监听必然被移除。两个实现细节值得注意{ passive: true }scroll 事件被声明为 passive浏览器因此可以不受事件回调阻塞而继续滚动这对长列表滚动流畅性很重要。源码中event.preventDefault()一行处于注释状态与 passive 选项保持一致event.stopPropagation()每次滚动触发且元素满足触底条件判断流程时会调用stopPropagation()。从源码结构看这是为了防止该容器的 scroll 事件继续向冒泡路径上的祖先节点传播避免与父级滚动逻辑如同时使用useWindowScroll相互干扰。4.4 触底判定1px 容差公式滚动回调内部的核心判定只有四行const el target as HTMLDivElement if (el) { const isBottom Math.abs(el.scrollHeight - el.clientHeight - el.scrollTop) 1 // ... }这是滚动容器是否已到底部的经典公式scrollHeight内容总高−clientHeight可视区高−scrollTop已滚动距离即为距底剩余像素。这里没有用 0而是 1是出于亚像素/取整误差的容差考虑——部分浏览器滚动到最底部时该差值可能落在(0, 1)之间严格相等判断会漏掉最后一次触底。4.5 防抖窗口与延迟触发确认触底后Hook 并没有立刻执行回调而是走一个先清后设的定时器模式见 src/useInfiniteScroll.tsif (isBottom isFunction(onScrollEnd?.current)) { clearTimeout(timeoutRef.current) timeoutRef.current setTimeout(() { if (onScrollEnd.current isFunction(onScrollEnd.current)) { onScrollEnd.current() } clearTimeout(timeoutRef.current) }, delay) }每次触底滚动事件都先clearTimeout再重新计时因此快速连续触底滚动时只有在停止重新触底delay默认 300ms后回调才真正执行一次——这正是内置防抖定时器触发前会再次校验onScrollEnd.current是否仍是合法函数借助 src/shared/isFunction.ts防止延迟期间组件状态变化导致调用到非法值。4.6 回调如何无重渲染地被替换createHandlerSetteruseInfiniteScroll通过工厂函数 createHandlerSetter 拿到[handlerRef, setHandler]并把setHandler作为 Hook 的返回值暴露给使用方const [onScrollEnd, setOnScrollEnd] createHandlerSetterunknown() // ... return setOnScrollEndcreateHandlerSetter 的注释明确写道设置回调 ref不会强制组件重新渲染它只把新函数写入handlerRef.current并对非函数入参抛错。这解释了第三节的用法约定onInfiniteScroll(fn)每轮渲染重新注册一次最新闭包拿到最新的data、isFetching但由于只写 ref、不触发 state 更新注册动作本身是零渲染开销的。类型层面该返回值对应 src/shared/types.ts 中定义的export type CallbackSetterTArgs (nextCallback: SomeCallbackTArgs) void4.7 一条完整的调用链把上述环节串起来一次触底触发的完整链路是容器滚动 → 浏览器派发scroll事件passive 监听不阻塞滚动useEvent 中的包装监听器把事件转发给handler.current即useInfiniteScroll注册的滚动回调滚动回调计算scrollHeight - clientHeight - scrollTop差值绝对值 1判定触底clearTimeoutsetTimeout(delay)重建防抖窗口窗口结束且onScrollEnd.current仍是函数时调用你通过onInfiniteScroll(fn)注册的fn。五、适用场景与边界官方文档的 Mastering the hook 部分给出了明确的使用边界这里完整保留✅ 何时使用When to use用它来抽象你自己在应用中实现无限滚动业务逻辑所需的代码简化各页面中该功能的落地。 不要做什么What not to do不要用这个 Hook 去防抖或节流你的函数。如果你实现的是分页式的无限滚动这类防抖/节流最好由你自行处理以确保应用的行为完全符合你的预期。结合源码可以补充几条实际边界触发源是容器元素自身的 scroll 事件滚动window/document而容器未滚动时不会触发内置防抖窗口固定作用于触底 → 执行回调这一段delay只影响这段延迟不会帮你合并请求中再次触底的情况——重复请求守卫如示例中的isFetching仍需业务侧实现触底判定基于容器的scrollHeight/clientHeight/scrollTop若内容高度小于可视区高度尚未撑满公式可能恒为触底状态注意配合内容最小高度或数据量。六、TypeScript 类型声明官方文档 docs/useInfiniteScroll.md 的 Types 一节给出的完整声明为import { type RefObject } from react; /** * Accepts an HTML Element ref, then returns a function that allows you to handle the infinite * scroll for that specific element. */ declare const useInfiniteScroll: TElement extends HTMLElement(ref: RefObjectTElement, delay?: number) import(./shared/types).CallbackSetterunknown; export default useInfiniteScroll;可以从中读出三件事ref是泛型化的RefObjectTElementTElement extends HTMLElementdelay是可选的第二参数源码中默认值为 300返回类型是CallbackSetterunknown即接收一个回调函数的设置器与源码return setOnScrollEnd一致。七、测试验证针对该 Hook 的测试位于 test/useInfiniteScroll.spec.js除assertHook通用断言外核心断言验证了返回值类型契约it(should return an callback setter, () { const ref { current: document.createElement(div) } const { result } renderHook(() useInfiniteScroll(ref)) expect(result.current).to.be.a(function) })注意这里用一个字面量{ current: ... }对象冒充 ref 也能通过 Hook 校验因为它确实拥有current属性这从侧面印证了 4.2 节中safeHasOwnProperty(ref, current)的校验策略它检查的是形状是否有current而非 React ref 的身份。八、延伸阅读与关键文件索引官方文档docs/useInfiniteScroll.mdHook 实现src/useInfiniteScroll.ts事件绑定工厂src/useEvent.tspassive 监听、effect 清理逻辑回调设置器src/factory/createHandlerSetter.ts回调类型定义src/shared/types.tsSomeCallback、CallbackSetter工具函数src/shared/isFunction.ts、src/shared/safeHasOwnProperty.ts测试用例test/useInfiniteScroll.spec.js子路径导出配置package.json如果你还想处理窗口级滚动位置或视口可见性可以在同一仓库中对照useWindowScroll、useViewportSpy等 Hook 的文档见 docs/ 目录选型useInfiniteScroll的定位始终是给你一个受控的、可延迟触发、自动清理的容器触底回调通道业务逻辑由你决定。赞分享前端开发工具【免费下载链接】beautiful-react-hooks A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 项目地址https://gitcode.com/gh_mirrors/be/beautiful-react-hooks点击查看免费下载相关推荐革命性多模态AI框架Rosetta腾讯混元团队如何突破遗忘-协同困境革命性多模态AI框架Rosetta腾讯混元团队如何突破遗忘 协同困境 在当今AI技术飞速发展的时代多模态大模型面临着遗忘 协同这一核心困境。当模型学习新beautiful-react-hooks 的 useDropZone 深度指南:把任意 DOM 元素变成可接收数据的拖放区beautiful react hooks 的 useDropZone 深度指南:把任意 DOM 元素变成可接收数据的拖放区 useDropZone 是 bea前端开发工具元素尺寸变化监测beautiful-react-hooks的useResizeObserver hooks完全指南元素尺寸变化监测beautiful react hooks的useResizeObserver hooks完全指南 在现代前端开发中实时监测DOM元素尺寸变前端开发工具上一篇MediaCrawler权限控制与安全爬取实战指南下一篇raygui 实战三个任务搭出 C 语言游戏参数调试面板创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考