使用 React 和 TypeScript 实现高性能的无限滚动列表

Question

目前正在使用 React 和 TypeScript 构建 Web 应用程序，请求的功能是显示从服务器获取的大量数据项列表。为了优化性能和用户体验，我想实现一个无限滚动机制，当用户到达列表末尾时加载更多项目。

主要要求是：

1. 使用 TypeScript 在 React 功能组件中有效地实现无限滚动。
2. 正确处理从服务器获取的数据和用户滚动时的状态更新。

这是当前列表组件的简化版本：

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

interface ListItemProps {
  id: number;
  title: string;
}

const ListItem: React.FC<ListItemProps> = ({ id, title }) => (
  <div className="list-item">
    {id}. {title}
  </div>
);

interface ListProps {
  fetchData: (start: number, limit: number) => Promise<ListItemProps[]>;
}

export const InfiniteScrollList: React.FC<ListProps> = ({ fetchData }) => {
  const [items, setItems] = useState<ListItemProps[]>([]);

  useEffect(() => {
    // Initial fetch on component mount
    fetchData(0, 20).then((data) => {
      setItems(data);
    });
  }, [fetchData]);

  return (
    <div className="list-container">
      {items.map((item) => (
        <ListItem key={item.id} id={item.id} title={item.title} />
      ))}
    </div>
  );
};

在此示例中，

fetchData

函数从给定索引开始从服务器获取指定数量的项目。初始提取会在组件安装时检索前 20 个项目。目标是修改此组件以支持无限滚动并根据需要有效地加载更多项目。

Answer 1

要在我们的 React 和 TypeScript 组件中实现无限滚动，我们将遵循以下步骤：

1. 安装处理滚动的包：我们将使用

   react-infinite-scroll-component

   包，它可以很容易地实现无限滚动。首先，我们通过运行

   npm install react-infinite-scroll-component

   .
   来安装它

2. 导入包：在

   InfiniteScrollList

   组件中，我们从包中导入

   InfiniteScroll

   组件：

import InfiniteScroll from 'react-infinite-scroll-component';

3. 使用 InfiniteScroll 组件包装您的列表项：我们使用

   list-container

   组件包装它们，而不是直接在

   InfiniteScroll

   div 中呈现列表项。该组件将负责检测用户何时到达列表末尾并调用一个函数来获取更多数据。

return (
  <div className="list-container">
    <InfiniteScroll
      dataLength={items.length}
      next={fetchMoreData}
      hasMore={true}
      loader={<h4>Loading...</h4>}
    >
      {items.map((item) => (
        <ListItem key={item.id} id={item.id} title={item.title} />
      ))}
    </InfiniteScroll>
  </div>
);

4. 定义

   fetchMoreData

   函数：

   InfiniteScroll

   组件在需要更多数据时调用

   next

   prop。在我们的例子中，这是我们需要定义的

   fetchMoreData

   函数。它将调用

   fetchData

   属性来获取更多项目并将它们附加到现有项目列表中。

const fetchMoreData = async () => {
  // Fetch the next batch of data
  const newItems = await fetchData(items.length, 20);

  // Update the state by appending the new items
  setItems((prevItems) => [...prevItems, ...newItems]);
};

现在，让我们解释一下到底发生了什么：

1. 我们安装了一个包来帮助我们让我们的列表永远滚动。这就像有一个帮手，他知道我们什么时候已经到了列表的末尾，需要添加更多的东西。

2. 我们告诉我们的代码通过导入它来使用它。

3. 我们更改了列表以使用该助手。它现在知道我们何时到达终点并要求我们的代码获取更多项目。它还会在等待新项目时显示“正在加载...”消息。

4. 我们创建了一个名为 fetchMoreData 的新函数，用于在助手请求时获取更多项目。它向我们的服务器询问更多项目并将它们添加到列表中。

现在，我们的列表将在向下滚动时不断加载更多项目，使其成为无限滚动列表。