React 中的无限滚动加载数据实现

React开发中,实现无限滚动加载数据是一种常见的用户体验优化手段,尤其适用于需要展示大量数据的列表或网格。通过监听滚动事件,并在接近容器底部时自动加载新数据,可以减少用户的等待时间,提高应用的流畅性和响应速度。下面,我们简单的来实现一下。

1. 状态管理

首先,代码通过React的useState钩子初始化了两个状态变量:pageNositemaData

  • pageNos用于记录当前加载的数据页码,初始值设为1。

  • itemaData用于存储已经加载的数据列表,初始值为空数组。

javascript 复制代码
const [pageNos, setPageNos] = useState(1);
const [itemaData, setItemData] = useState([]);
2. 滚动事件处理

handleScroll函数用于处理滚动事件。当用户滚动到容器的某个位置时,该函数将被触发。

  • 首先,通过event.target获取到触发滚动事件的元素(通常是列表的容器)。

  • 然后,计算该元素的clientHeight(可视区域高度)、scrollHeight(总内容高度)和scrollTop(已滚动的高度)。

  • 接着,通过比较scrollHeight - scrollTopclientHeight + 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)滚动事件处理函数,避免在滚动过程中频繁触发数据加载请求。

相关推荐
逐·風1 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦2 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山3 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄4 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨6 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL6 小时前
npm入门教程1:npm简介
前端·npm·node.js