React 之触底加载，轻松应对无尽列表

2024-01-15 22:07:39

React 作为当下流行的前端框架，以其强大的生态系统和灵活的组件化设计而著称。而在我们开发列表或无限滚动页面时，常常需要在用户触底时加载更多数据，以实现更流畅的滚动体验。因此，在本文中，我将为大家分享在 React 中实现触底加载的常见方法和技巧。

1. 使用 Intersection Observer API

Intersection Observer API 是一个浏览器原生 API，它允许你监听元素何时进入或离开视口。这对于实现触底加载非常有用，因为你可以监听列表容器何时进入视口，然后加载更多数据。

const listRef = useRef(null);

useEffect(() => {
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 加载更多数据
      }
    });
  }, { threshold: 1 });

  if (listRef.current) {
    observer.observe(listRef.current);
  }

  return () => {
    observer.disconnect();
  };
}, []);

2. 使用 React Virtualized

React Virtualized 是一个库，它提供了许多用于构建虚拟列表的组件。虚拟列表可以帮助你提高列表的性能，因为它只渲染当前可见的列表项。React Virtualized 还提供了触底加载的功能。

import { List } from 'react-virtualized';

const MyList = () => {
  const data = [/* 数据 */];

  const rowRenderer = ({ index, key, style }) => {
    return <div key={key} style={style}>Item {data[index]}</div>;
  };

  return (
    <List
      height={window.innerHeight}
      width={window.innerWidth}
      rowCount={data.length}
      rowHeight={50}
      rowRenderer={rowRenderer}
      overscanRowCount={10}
      onRowsRendered={({ startIndex, stopIndex }) => {
        // 加载更多数据
      }}
    />
  );
};

3. 使用自定义滚动事件

如果你不想使用 Intersection Observer API 或 React Virtualized，你也可以使用自定义滚动事件来实现触底加载。

const listRef = useRef(null);

useEffect(() => {
  const list = listRef.current;

  list.addEventListener('scroll', () => {
    if (list.scrollTop + list.clientHeight >= list.scrollHeight) {
      // 加载更多数据
    }
  });

  return () => {
    list.removeEventListener('scroll');
  };
}, []);

4. 使用第三方库

除了上述方法外，你还可以使用第三方库来实现触底加载。一些流行的库包括：