长列表展示

数据分页

利用分页的原理，每次服务器端只返回一定数目的数据，浏览器每次只对一部分进行加载

懒加载

每次只加载一部分数据，其余数据当需要使用时再去加载

滚动到底部时加载数据

数组分块（分片渲染）

使用数组分块技术，思路是为要处理的项目创建一个队列，然后设置定时器每过一段时间取出一部分数据，然后再使用定时器取出下一个要处理的项目进行处理，接着再设置另一个定时器

虚拟列表

每次只渲染需要视口部分

通过计算出当前可视区域内的列表项索引范围，然后只渲染这些项来实现。当用户滚动列表时，虚拟列表会动态地改变渲染区域，只渲染用户可见的部分，而将其他部分置于虚拟DOM中，从而避免了无用的重绘和回流。

需要指定数据源、每个列表项的高度或宽度、以及需要渲染的可见区域大小。

可以使用React第三方库如react-virtualized或react-window来实现虚拟列表的效果

react-virtualized示例

import React from 'react';
import { List } from 'react-virtualized';

const data = [...]; // 数据源
const rowHeight = 50; // 每行高度
const visibleRowCount = 5; // 可见行数

function renderItem({ index, key, style }) {
  const item = data[index]; // 获取当前项数据
  return (
    <div key={key} style={style}>
      {item.name}
    </div>
  );
}

function VirtualList() {
  return (
    <List
      rowCount={data.length} // 数据总数
      rowHeight={rowHeight} // 行高度
      height={visibleRowCount * rowHeight} // 可见区域高度
      width={400} // 可见区域宽度
      rowRenderer={renderItem} // 渲染函数
    />
  );
}