react实现刷新加载
React 实现下拉刷新与上拉加载
下拉刷新实现方法
使用第三方库如react-pull-to-refresh简化实现
安装依赖：npm install react-pull-to-refresh
import PullToRefresh from 'react-pull-to-refresh';
function App() {
const handleRefresh = () => {
return new Promise((resolve) => {
// 模拟异步操作
setTimeout(() => {
// 实际应替换为数据获取逻辑
resolve();
}, 1000);
});
};
return (
<PullToRefresh onRefresh={handleRefresh}>
<div>下拉刷新内容区域</div>
</PullToRefresh>
);
}自定义实现方案：
import { useState, useRef } from 'react';
function RefreshWrapper({ children, onRefresh }) {
const [loading, setLoading] = useState(false);
const startY = useRef(0);
const handleTouchStart = (e) => {
startY.current = e.touches[0].clientY;
};
const handleTouchMove = (e) => {
if (window.scrollY === 0 && e.touches[0].clientY - startY.current > 50) {
setLoading(true);
onRefresh().finally(() => setLoading(false));
}
};
return (
<div
onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove}
>
{loading && <div>加载中...</div>}
{children}
</div>
);
}上拉加载更多实现
使用Intersection Observer API检测滚动到底部：
import { useEffect, useRef, useState } from 'react';
function InfiniteScroll({ loadMore }) {
const [page, setPage] = useState(1);
const observerTarget = useRef(null);
useEffect(() => {
const observer = new IntersectionObserver(
entries => {
if (entries[0].isIntersecting) {
loadMore(page).then(() => {
setPage(p => p + 1);
});
}
},
{ threshold: 1.0 }
);
if (observerTarget.current) {
observer.observe(observerTarget.current);
}
return () => {
if (observerTarget.current) {
observer.unobserve(observerTarget.current);
}
};
}, [page, loadMore]);
return (
<div>
{/* 内容列表 */}
<div ref={observerTarget} style={{ height: '20px' }}></div>
</div>
);
}优化建议
-
节流处理滚动事件，避免频繁触发
const throttle = (func, delay) => { let lastCall = 0; return function(...args) { const now = new Date().getTime(); if (now - lastCall < delay) return; lastCall = now; return func(...args); }; }; -
添加加载状态提示
{isLoading && ( <div style={{ padding: '10px', textAlign: 'center' }}> <span>加载更多数据...</span> </div> )} -
数据全部加载完成后显示提示
{isComplete && ( <div style={{ padding: '10px', textAlign: 'center' }}> <span>已加载全部数据</span> </div> )}
常见问题处理
- 防止重复请求：在加载状态未完成时锁定请求
- 网络错误处理：添加错误捕获和重试机制
- 列表空状态：显示友好提示信息
- 内存管理：大数据量时考虑虚拟滚动方案
