antd table 滚动加载数据实现：提升网页信息展现效率

前端

2024-02-05 07:54:49

前言

在当今信息爆炸的时代，网页加载速度和性能优化已成为网站建设中的关键因素。尤其是在面对大量数据需要展示的场景时，如何流畅地呈现这些数据并保证用户体验，就成为了开发者需要解决的难题之一。

滚动加载的优势

滚动加载，也称为懒加载，是一种常见的数据加载技术，主要用于处理大数据集的展示问题。其基本原理是仅加载当前可见区域的数据，当用户向下滚动页面时，再加载下一批数据。滚动加载具有以下优势：

提高页面加载速度：通过只加载当前可见的数据，可以显著缩短页面加载时间，提升用户初次访问网站的体验。
优化网络带宽使用：滚动加载机制减少了不必要的数据传输，优化了网络带宽的使用效率。
改善页面流畅性：由于滚动加载避免了大量数据的加载，因此可以减少页面卡顿的发生，从而提高页面滚动时的流畅性。
节省服务器资源：滚动加载机制减轻了服务器的压力，避免了因大量数据加载导致的服务器资源消耗过高的问题。

实现antd table滚动加载数据

Ant Design是一个流行的React UI库，其中包含了Table组件，该组件提供了表格数据展示功能。为了实现antd table的滚动加载，我们可以按照以下步骤进行操作：

在Table组件外层包裹一个div元素，并为其添加onScrollCapture事件监听器。
在onScrollCapture事件处理函数中，判断滚动条是否已到达页面底部。如果已到达页面底部，则触发加载更多数据的操作。
通过setState更新Table组件的dataSource属性，将新加载的数据添加到现有数据中。

以下是一个实现antd table滚动加载数据的代码示例：

import { Table, Button } from "antd";

const App = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    loadData();
  }, []);

  const loadData = () => {
    setLoading(true);
    // 模拟异步数据加载
    setTimeout(() => {
      const newData = [...data];
      for (let i = 0; i < 10; i++) {
        newData.push({
          key: i,
          name: `Item ${i}`,
        });
      }
      setData(newData);
      setLoading(false);
    }, 1000);
  };

  const onScrollCapture = (e) => {
    const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
    if (bottom && !loading) {
      loadData();
    }
  };

  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
    },
  ];

  return (
    <div onScrollCapture={onScrollCapture}>
      <Table
        columns={columns}
        dataSource={data}
        pagination={false}
        loading={loading}
      />
      {loading && <Button type="primary" loading>Loading...</Button>}
    </div>
  );
};

export default App;