构建无限滚动功能的利器：ahooks useInfiniteScroll

前端

2023-11-25 00:12:24

前言

在现代 Web 开发中，无限滚动已成为一种广泛采用的技术，它允许用户在无需手动刷新或加载更多按钮的情况下连续向下滚动页面加载更多内容。

ahooks useInfiniteScroll 概览

ahooks useInfiniteScroll 是一个 React Hook，旨在封装常见的无限滚动逻辑，简化了开发过程。它提供了一组易于使用的 API，用于管理滚动事件、加载状态和数据获取。

工作原理

useInfiniteScroll 采用观察者模式，监听页面滚动事件。当用户滚动到底部时，它将触发加载更多数据的回调函数。该回调函数负责发出网络请求或从其他来源获取数据，然后将新数据追加到当前数据集中。

用法

使用 useInfiniteScroll 非常简单，只需遵循以下步骤：

安装 ahooks ：npm install ahooks --save
导入 useInfiniteScroll ：import { useInfiniteScroll } from 'ahooks'
在组件中使用 useInfiniteScroll ：

const { run, loading, data, error } = useInfiniteScroll(() => {
  // 发出数据请求的回调函数
}, {
  // 可选参数，用于自定义滚动加载行为
});

可选参数

useInfiniteScroll 提供了一些可选参数，用于自定义滚动加载行为：

container : 滚动容器的 ref，默认为 window
loadMoreCount : 一次加载更多数据的数量，默认为 5
loadMoreOffset : 距离底部开始加载更多数据的距离，默认为 200
delayTime : 开始加载新数据的延迟时间，默认为 0
loadingComponent : 加载中的组件
doneComponent : 已加载完成的组件
immediate : 是否立即加载数据，默认为 false

示例

让我们创建一个简单的无限滚动列表：

import React, { useEffect, useState } from 'react';
import { useInfiniteScroll } from 'ahooks';

const List = () => {
  const [data, setData] = useState([]);
  const { loading, run } = useInfiniteScroll(() => {
    // 模拟数据请求
    setTimeout(() => {
      const newData = Array.from({ length: 5 }, (_, i) => i + 1);
      setData(prev => [...prev, ...newData]);
      run(); // 完成加载后调用 run() 以继续监听滚动事件
    }, 1000);
  });

  useEffect(() => {
    run(); // 初次加载数据
  }, [run]);

  return (
    <ul>
      {data.map(item => <li key={item}>{item}</li>)}
      {loading && <p>加载中...</p>}
    </ul>
  );
};

export default List;