React开发中,实现无限滚动加载数据是一种常见的用户体验优化手段,尤其适用于需要展示大量数据的列表或网格。通过监听滚动事件,并在接近容器底部时自动加载新数据,可以减少用户的等待时间,提高应用的流畅性和响应速度。下面,我们简单的来实现一下。
1. 状态管理
首先,代码通过React的useState
钩子初始化了两个状态变量:pageNos
和itemaData
。
-
pageNos
用于记录当前加载的数据页码,初始值设为1。 -
itemaData
用于存储已经加载的数据列表,初始值为空数组。
javascript
const [pageNos, setPageNos] = useState(1);
const [itemaData, setItemData] = useState([]);
2. 滚动事件处理
handleScroll
函数用于处理滚动事件。当用户滚动到容器的某个位置时,该函数将被触发。
-
首先,通过
event.target
获取到触发滚动事件的元素(通常是列表的容器)。 -
然后,计算该元素的
clientHeight
(可视区域高度)、scrollHeight
(总内容高度)和scrollTop
(已滚动的高度)。 -
接着,通过比较
scrollHeight - scrollTop
与clientHeight + 10
(这里加10是为了提前加载,提高用户体验)来判断是否已滚动到接近容器底部。 -
如果是,则调用
setPageNos
更新页码,并调用getOrderListss
函数加载新数据。
javascript
const handleScroll = (event: any) => {
const element = event.target;
var { clientHeight, scrollHeight, scrollTop } = event.target;
if (scrollHeight - scrollTop < element.clientHeight + 10) {
setPageNos(prevPage => prevPage + 1);
getOrderListss();
}
};
3. 数据加载
getOrderListss
函数负责根据当前页码加载数据。
-
构造一个数据对象
data
,包含页码pageNos
、页面大小pageSize
(固定为'10')和订单状态orderStatus
(这里tabActive
可能是一个外部状态变量,用于表示当前选中的订单状态)。 -
调用
getOrderList
函数(假设这是一个API调用函数)并传入data
对象,然后处理返回的响应。 -
响应中的数据通过
flatMap
方法处理,以合并每个条目下的subsetList
数组,然后将结果追加到itemaData
状态中。
javascript
const getOrderListss = () => {
let data = {
pageNo: pageNos,
pageSize: '10',
orderStatus: tabActive, // 假设tabActive是外部定义的状态
};
getOrderList(data).then((res: any) => {
let data22 = res.content.flatMap((item: any) => item.subsetList);
setItemData(prevData => [...prevData, ...data22]);
});
};
4. 绑定滚动事件
最后,在div
元素上通过onScroll={handleScroll}
将滚动事件绑定到handleScroll
函数上。这样,每当用户滚动这个div
时,handleScroll
函数就会被调用。
html
<div className="list_1 flex-col" style={{overflowX:'hidden'}} onScroll={handleScroll}>
{/* 列表内容 */}
</div>
通过上述代码,我们实现了一个基本的无限滚动加载数据的功能。这种方式可以有效提升大数据量列表的用户体验,减少等待时间,并让用户感觉应用更加流畅和响应迅速。不过,在实际应用中,还需要注意性能优化,比如防抖(debounce)或节流(throttle)滚动事件处理函数,避免在滚动过程中频繁触发数据加载请求。