当前位置：首页 > React

react 实现长列表案例

2026-01-27 16:10:00React

实现长列表的常用方法

虚拟滚动技术（Virtual Scrolling） 虚拟滚动通过仅渲染当前可视区域内的列表项来提升性能，适合超长列表场景。React生态中常用库如react-window或react-virtualized。

安装react-window：

npm install react-window

基础实现示例：

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const LongList = () => (
  <List
    height={500}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

分页加载方案

滚动加载（Infinite Scroll） 监听滚动事件动态加载数据，常用库如react-infinite-scroll-component。

安装：

npm install react-infinite-scroll-component

实现示例：

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

const LongList = ({ items, fetchMoreData, hasMore }) => (
  <InfiniteScroll
    dataLength={items.length}
    next={fetchMoreData}
    hasMore={hasMore}
    loader={<h4>Loading...</h4>}
  >
    {items.map((item, index) => (
      <div key={index}>{item.content}</div>
    ))}
  </InfiniteScroll>
);

性能优化技巧

避免不必要的重新渲染 使用React.memo包裹列表项组件，或通过useMemo缓存计算结果：

const MemoizedRow = React.memo(({ data, index }) => {
  return <div>{data[index]}</div>;
});

键值优化 确保每个列表项有稳定唯一的key，避免使用数组索引：

items.map(item => (
  <div key={item.id}>{item.name}</div>
))

原生实现方案

Intersection Observer API 不依赖第三方库的实现方式，通过观察元素可见性触发加载：

react 实现长列表案例

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    loadMoreItems();
  }
});

// 绑定到列表底部元素
observer.observe(document.querySelector('#loader'));