MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

React 无限滚动列表的设计与实现

2023-01-123.4k 阅读

什么是无限滚动列表

在前端开发中，无限滚动列表是一种常见的用户界面模式，当用户滚动到列表底部时，新的数据会自动加载并添加到列表中，给用户一种列表内容无穷无尽的感觉。这种模式在很多场景下都有应用，比如社交媒体的动态流、电商平台的商品展示等。在 React 应用中实现无限滚动列表，可以显著提升用户体验，避免一次性加载大量数据导致的性能问题。

React 实现无限滚动列表的核心思路

实现 React 无限滚动列表主要涉及以下几个核心要点：

  1. 监听滚动事件：通过监听窗口或列表容器的滚动事件，判断是否滚动到了底部。
  2. 判断是否加载新数据：当滚动到特定位置（通常是底部）时，触发加载新数据的逻辑。
  3. 数据加载与更新：使用 API 调用获取新数据，并将其添加到现有的列表数据中，同时更新 React 组件的状态。
  4. 性能优化：处理大量数据时，要确保滚动的流畅性，避免性能瓶颈。

监听滚动事件

在 React 中，可以通过 window.addEventListener('scroll', callback) 来监听窗口的滚动事件。但更好的做法是监听列表容器的滚动事件，这样可以避免不必要的计算。

import React, { useEffect } from 'react';

const InfiniteScrollList = () => {
  useEffect(() => {
    const handleScroll = () => {
      // 滚动事件处理逻辑
    };
    const listContainer = document.getElementById('list-container');
    if (listContainer) {
      listContainer.addEventListener('scroll', handleScroll);
    }
    return () => {
      if (listContainer) {
        listContainer.removeEventListener('scroll', handleScroll);
      }
    };
  }, []);

  return (
    <div id="list-container">
      {/* 列表内容 */}
    </div>
  );
};

export default InfiniteScrollList;

在上述代码中，useEffect 钩子函数在组件挂载时添加滚动事件监听器，在组件卸载时移除监听器，以避免内存泄漏。

判断是否加载新数据

判断是否滚动到列表底部的逻辑可以通过获取列表容器的 scrollTop、clientHeight 和 scrollHeight 来实现。

const handleScroll = () => {
  const listContainer = document.getElementById('list-container');
  if (listContainer) {
    const { scrollTop, clientHeight, scrollHeight } = listContainer;
    if (scrollTop + clientHeight >= scrollHeight - 100) {
      // 距离底部 100px 时触发加载新数据
      loadNewData();
    }
  }
};

数据加载与更新

假设我们有一个 API 来获取列表数据，例如 /api/data?page=1&limit=10，可以使用 fetch 或 axios 来调用这个 API。

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

const InfiniteScrollList = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);

  const loadNewData = async () => {
    if (isLoading) return;
    setIsLoading(true);
    try {
      const response = await fetch(`/api/data?page=${page}&limit=10`);
      const newData = await response.json();
      setData([...data, ...newData]);
      setPage(page + 1);
    } catch (error) {
      console.error('Error loading data:', error);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    const handleScroll = () => {
      const listContainer = document.getElementById('list-container');
      if (listContainer) {
        const { scrollTop, clientHeight, scrollHeight } = listContainer;
        if (scrollTop + clientHeight >= scrollHeight - 100) {
          loadNewData();
        }
      }
    };
    const listContainer = document.getElementById('list-container');
    if (listContainer) {
      listContainer.addEventListener('scroll', handleScroll);
    }
    return () => {
      if (listContainer) {
        listContainer.removeEventListener('scroll', handleScroll);
      }
    };
  }, []);

  return (
    <div id="list-container">
      {data.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
      {isLoading && <div>Loading...</div>}
    </div>
  );
};

export default InfiniteScrollList;

在上述代码中，loadNewData 函数负责调用 API 获取新数据，并将新数据合并到现有数据中。isLoading 状态用于控制加载指示器的显示。

性能优化

使用虚拟列表

当列表数据量非常大时，渲染所有列表项会导致性能问题。虚拟列表是一种优化技术，只渲染可见区域的列表项。React 中有一些库可以帮助实现虚拟列表，比如 react - virtualized 和 react - window。

以 react - window 为例，安装依赖：

npm install react - window

使用示例：

import React, { useEffect, useState } from'react';
import { FixedSizeList } from'react - window';

const InfiniteScrollList = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);

  const loadNewData = async () => {
    if (isLoading) return;
    setIsLoading(true);
    try {
      const response = await fetch(`/api/data?page=${page}&limit=10`);
      const newData = await response.json();
      setData([...data, ...newData]);
      setPage(page + 1);
    } catch (error) {
      console.error('Error loading data:', error);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    const handleScroll = () => {
      const listContainer = document.getElementById('list-container');
      if (listContainer) {
        const { scrollTop, clientHeight, scrollHeight } = listContainer;
        if (scrollTop + clientHeight >= scrollHeight - 100) {
          loadNewData();
        }
      }
    };
    const listContainer = document.getElementById('list-container');
    if (listContainer) {
      listContainer.addEventListener('scroll', handleScroll);
    }
    return () => {
      if (listContainer) {
        listContainer.removeEventListener('scroll', handleScroll);
      }
    };
  }, []);

  const Row = ({ index, style }) => {
    const item = data[index];
    return (
      <div style={style}>
        {item}
      </div>
    );
  };

  return (
    <div id="list-container">
      <FixedSizeList
        height={400}
        itemCount={data.length}
        itemSize={50}
        width={300}
      >
        {Row}
      </FixedSizeList>
      {isLoading && <div>Loading...</div>}
    </div>
  );
};

export default InfiniteScrollList;

FixedSizeList 组件只渲染可见区域的列表项，大大提高了性能。height、itemCount、itemSize 和 width 是必须的属性，分别表示列表的高度、列表项数量、每个列表项的高度和列表的宽度。

防抖与节流

在处理滚动事件时，频繁触发加载新数据的逻辑可能会导致性能问题。可以使用防抖（Debounce）或节流（Throttle）技术来优化。

防抖：在一定时间内，如果事件被频繁触发，只会执行最后一次。

import { debounce } from 'lodash';

const handleScroll = debounce(() => {
  const listContainer = document.getElementById('list-container');
  if (listContainer) {
    const { scrollTop, clientHeight, scrollHeight } = listContainer;
    if (scrollTop + clientHeight >= scrollHeight - 100) {
      loadNewData();
    }
  }
}, 300);

节流：在一定时间内，无论事件触发多么频繁，都只会执行一次。

import { throttle } from 'lodash';

const handleScroll = throttle(() => {
  const listContainer = document.getElementById('list-container');
  if (listContainer) {
    const { scrollTop, clientHeight, scrollHeight } = listContainer;
    if (scrollTop + clientHeight >= scrollHeight - 100) {
      loadNewData();
    }
  }
}, 300);

错误处理

在数据加载过程中，可能会遇到网络错误、API 响应错误等情况。良好的错误处理机制可以提升用户体验。

const loadNewData = async () => {
  if (isLoading) return;
  setIsLoading(true);
  try {
    const response = await fetch(`/api/data?page=${page}&limit=10`);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const newData = await response.json();
    setData([...data, ...newData]);
    setPage(page + 1);
  } catch (error) {
    setError(error.message);
  } finally {
    setIsLoading(false);
  }
};

在上述代码中，通过 try - catch 块捕获错误，并将错误信息存储在 error 状态中，然后可以在组件中显示给用户。

return (
  <div id="list-container">
    {error && <div>{error}</div>}
    {data.map((item, index) => (
      <div key={index}>{item}</div>
    ))}
    {isLoading && <div>Loading...</div>}
  </div>
);

分页与加载策略

在实际应用中，合理的分页和加载策略非常重要。除了简单的按固定数量分页加载，还可以考虑以下策略：

  1. 渐进式加载：首次加载较少的数据，随着用户滚动逐渐加载更多，减少初始加载时间。
  2. 预加载：在用户即将滚动到列表底部时，提前开始加载下一页数据，以提高加载速度。

渐进式加载

可以根据用户的滚动距离来动态调整每次加载的数据量。

const loadNewData = async () => {
  if (isLoading) return;
  setIsLoading(true);
  try {
    const scrollTop = window.pageYOffset;
    const limit = scrollTop > 500? 20 : 10;
    const response = await fetch(`/api/data?page=${page}&limit=${limit}`);
    const newData = await response.json();
    setData([...data, ...newData]);
    setPage(page + 1);
  } catch (error) {
    console.error('Error loading data:', error);
  } finally {
    setIsLoading(false);
  }
};

预加载

可以通过提前计算用户的滚动趋势，在距离底部一定距离时开始加载下一页数据。

let lastScrollTop = 0;
const handleScroll = () => {
  const listContainer = document.getElementById('list-container');
  if (listContainer) {
    const { scrollTop, clientHeight, scrollHeight } = listContainer;
    const isScrollingDown = scrollTop > lastScrollTop;
    lastScrollTop = scrollTop;
    if (isScrollingDown && scrollTop + clientHeight >= scrollHeight - 200) {
      loadNewData();
    }
  }
};

与 React Router 的集成

如果你的 React 应用使用了 React Router，在实现无限滚动列表时需要注意一些问题。例如，当用户导航到其他页面后再返回，可能需要重置列表状态。

import { useLocation } from'react-router-dom';

const InfiniteScrollList = () => {
  const location = useLocation();
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    setData([]);
    setPage(1);
  }, [location]);

  const loadNewData = async () => {
    if (isLoading) return;
    setIsLoading(true);
    try {
      const response = await fetch(`/api/data?page=${page}&limit=10`);
      const newData = await response.json();
      setData([...data, ...newData]);
      setPage(page + 1);
    } catch (error) {
      console.error('Error loading data:', error);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    const handleScroll = () => {
      const listContainer = document.getElementById('list-container');
      if (listContainer) {
        const { scrollTop, clientHeight, scrollHeight } = listContainer;
        if (scrollTop + clientHeight >= scrollHeight - 100) {
          loadNewData();
        }
      }
    };
    const listContainer = document.getElementById('list-container');
    if (listContainer) {
      listContainer.addEventListener('scroll', handleScroll);
    }
    return () => {
      if (listContainer) {
        listContainer.removeEventListener('scroll', handleScroll);
      }
    };
  }, []);

  return (
    <div id="list-container">
      {data.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
      {isLoading && <div>Loading...</div>}
    </div>
  );
};

export default InfiniteScrollList;

在上述代码中，通过 useLocation 钩子函数监听路由变化，当路由变化时，重置列表数据和页码。

测试无限滚动列表

对无限滚动列表进行测试可以确保其功能的正确性和稳定性。可以使用 Jest 和 React Testing Library 进行单元测试和集成测试。

单元测试

测试滚动事件处理逻辑：

import React from'react';
import { render, screen } from '@testing-library/react';
import InfiniteScrollList from './InfiniteScrollList';

describe('InfiniteScrollList', () => {
  it('should call loadNewData when scroll to bottom', () => {
    const { container } = render(<InfiniteScrollList />);
    const listContainer = container.querySelector('#list-container');
    const loadNewDataMock = jest.fn();
    Object.defineProperty(listContainer, 'scrollTop', { value: 0 });
    Object.defineProperty(listContainer, 'clientHeight', { value: 100 });
    Object.defineProperty(listContainer,'scrollHeight', { value: 200 });
    const handleScroll = InfiniteScrollList.prototype.handleScroll.bind({ loadNewData: loadNewDataMock });
    handleScroll();
    expect(loadNewDataMock).toHaveBeenCalled();
  });
});

集成测试

测试数据加载和更新：

import React from'react';
import { render, waitFor } from '@testing-library/react';
import InfiniteScrollList from './InfiniteScrollList';

describe('InfiniteScrollList', () => {
  it('should load new data and update list', async () => {
    const { getByText } = render(<InfiniteScrollList />);
    await waitFor(() => {
      expect(getByText('New Data Item')).toBeInTheDocument();
    });
  });
});

跨浏览器兼容性

在实现无限滚动列表时，需要考虑跨浏览器兼容性。不同浏览器在处理滚动事件、API 支持等方面可能存在差异。

  1. 滚动事件兼容性：某些浏览器可能对 scroll 事件的触发频率和时机有不同的实现。可以通过测试不同浏览器来确保滚动事件处理逻辑的一致性。
  2. API 兼容性：如果使用了新的 JavaScript API，如 fetch，需要考虑旧浏览器的支持情况。可以使用 polyfill 来提供兼容性。

例如，为 fetch 添加 polyfill：

npm install whatwg - fetch

在入口文件中引入：

import 'whatwg - fetch';

结论

在 React 中实现无限滚动列表需要综合考虑多个方面，包括滚动事件监听、数据加载与更新、性能优化、错误处理、分页与加载策略、与 React Router 的集成、测试以及跨浏览器兼容性等。通过合理的设计和实现，可以为用户提供流畅、高效的无限滚动体验，提升应用的整体质量。希望本文的内容能够帮助你在实际项目中顺利实现 React 无限滚动列表。