箭头函数不直接处理无限滚动，而是封装请求逻辑；需监听滚动事件判断触底，配合防抖节流、加载状态控制及 useRef 或函数式更新避免闭包陷阱。
箭头函数本身不直接“处理”无限滚动，它只是你写请求逻辑时的一种函数写法。关键在于：用箭头函数封装请求（比如 fetch），在滚动到底部时触发，并配合防抖、节流和加载状态控制，避免重复请求或崩溃。
监听滚动并判断是否触底
监听容器（通常是 window 或某个滚动区域）的 scroll 事件，计算是否接近底部：
- 用
scrollTop + clientHeight >= scrollHeight - offset判断（offset比如 100，提前加载） - 推荐监听目标容器而非
window，尤其在局部滚动场景（如弹窗、卡片列表） - 别在每次 scroll 中直接发请求——必须加防抖或节流，否则高频触发会崩
用箭头函数封装请求逻辑
把 API 调用写成箭头函数，方便传参、闭包捕获变量（比如页码、loading 状态）：
const loadMore = async () => {
if (loading || !hasMore) return;
<p>setLoading(true);
try {
const res = await fetch(<code>/api/items?page=${page}&limit=20</code>);
const data = await res.json();</p><pre class="brush:php;toolbar:false;">setItems(prev => [...prev, ...data]);
setPage(prev => prev + 1);
setHasMore(data.length > 0);} catch (err) { console.error("加载失败", err); } finally { setLoading(false); } };
这里 loadMore 是箭头函数（也可用 function 声明），重点是它能自然访问外层的 page、loading 等 React state 或变量。
立即学习“Java免费学习笔记（深入）”；
绑定滚动事件并安全调用
在组件挂载/更新时绑定，在卸载时清除。用箭头函数保持 this（或上下文）一致，避免事件处理器中 this 失效问题（虽然现代 React 函数组件不用 this，但箭头函数仍让回调更简洁）：
- 用
useEffect注册和清理 scroll 事件 - 事件回调里调用
loadMore，但先做节流（例如用setTimeout防止连发） - 检查是否正在加载、是否还有数据，双重防护
注意闭包陷阱和状态异步更新
React 中 state 更新是异步的，如果在滚动回调里直接读 page，可能拿到旧值。解决方案：
- 用函数式更新：
setPage(prev => prev + 1) - 或用
useRef存储最新页码，供事件回调实时读取 - 避免在箭头函数里直接依赖可能过期的 props/state —— 尤其在防抖/节流中
