当前位置：首页 > article >正文

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

article 2024/11/18 14:23:13

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

1. 状态管理

首先，代码通过React的useState钩子初始化了两个状态变量：pageNos和itemaData。

pageNos用于记录当前加载的数据页码，初始值设为1。
itemaData用于存储已经加载的数据列表，初始值为空数组。

const [pageNos, setPageNos] = useState(1);
const [itemaData, setItemData] = useState([]);

2. 滚动事件处理

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

首先，通过event.target获取到触发滚动事件的元素（通常是列表的容器）。
然后，计算该元素的clientHeight（可视区域高度）、scrollHeight（总内容高度）和scrollTop（已滚动的高度）。
接着，通过比较scrollHeight - scrollTop与clientHeight + 10（这里加10是为了提前加载，提高用户体验）来判断是否已滚动到接近容器底部。
如果是，则调用setPageNos更新页码，并调用getOrderListss函数加载新数据。

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状态中。

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函数就会被调用。

<div className="list_1 flex-col" style={{overflowX:'hidden'}} onScroll={handleScroll}>
    {/* 列表内容 */}
</div>

通过上述代码，我们实现了一个基本的无限滚动加载数据的功能。这种方式可以有效提升大数据量列表的用户体验，减少等待时间，并让用户感觉应用更加流畅和响应迅速。不过，在实际应用中，还需要注意性能优化，比如防抖（debounce）或节流（throttle）滚动事件处理函数，避免在滚动过程中频繁触发数据加载请求。

查看全文

http://www.kler.cn/a/325371.html