虚拟列表react-virtualized使用（npm install react-virtualized）

虚拟化列表 (List)

// 1. 虚拟化列表 (List)

import { List } from 'react-virtualized';
import 'react-virtualized/styles.css'; // 只导入一次样式

// 示例数据
const list = Array(1000).fill().map((_, index) => ({
id: index,
name: Item ${index},
description: This is item number ${index} in the list
}));

function Index() {
const rowRenderer = ({ index, key, style }) => {
const item = list[index];
return (

{item.name}

{item.description}

);
};
复制代码
```
 return (
     <List
         width={600} // 列表宽度
         height={400} // 列表高度
         rowCount={list.length} // 总行数
         rowHeight={80} // 每行高度
         rowRenderer={rowRenderer} // 行渲染函数
         overscanRowCount={5} // 预渲染的行数
     />
 )
```
}

export default Index;

可变高度列表 (CellMeasurer)

// 2. 可变高度列表 (CellMeasurer)

import { List, CellMeasurer, CellMeasurerCache } from 'react-virtualized';
import 'react-virtualized/styles.css';

// 可变高度数据
const variableData = Array(500).fill().map((_, index) => ({
id: index,
title: Item ${index},
content: This is item ${index}. .repeat(Math.floor(Math.random() * 10) + 1)
}));

function Index() {
// 创建测量缓存
const cache = new CellMeasurerCache({
defaultHeight: 60,
fixedWidth: true
});

复制代码

 const rowRenderer = ({ index, key, parent, style }) => {
     const item = variableData[index];

     return (
         <CellMeasurer
             key={key}
             cache={cache}
             parent={parent}
             columnIndex={0}
             rowIndex={index}
         >
             <div style={style} className="variable-item">
                 <h3>{item.title}</h3>
                 <p>{item.content}</p>
             </div>
         </CellMeasurer>
     );
 };

 return (
     <List
         width={600} // 列表宽度
         height={400} // 列表高度
         deferredMeasurementCache={cache}
         rowHeight={cache.rowHeight} // 每行高度
         rowCount={variableData.length} // 总行数
         rowRenderer={rowRenderer} // 行渲染函数
         overscanRowCount={3} // 预渲染的行数
     />
 )

}

export default Index;

无限加载列表 - 高度固定

// 3. 无限加载列表 - 高度固定

import React, { useState } from 'react';
import { List, AutoSizer } from 'react-virtualized';
import 'react-virtualized/styles.css';

function InfiniteLoadingList() {
const [items, setItems] = useState(
Array(50).fill().map((_, i) => ({ id: i, name: Item ${i} }))
);
const [loading, setLoading] = useState(false);

const loadMoreItems = () => {
if (loading) return;
复制代码
```
 setLoading(true);
 
 // 模拟API调用
 setTimeout(() => {
   const newItems = Array(50).fill().map((_, i) => ({
     id: items.length + i,
     name: `Item ${items.length + i}`
   }));
   
   setItems(prev => [...prev, ...newItems]);
   setLoading(false);
 }, 1000);
```
};

const isRowLoaded = ({ index }) => index < items.length;

const rowRenderer = ({ index, key, style }) => {
if (!isRowLoaded({ index })) {
return (

Loading...

);
}
复制代码
```
 const item = items[index];
 return (
   <div key={key} style={style} className="list-item">
     {item.name}
   </div>
 );
```
};

const onRowsRendered = ({ stopIndex }) => {
if (stopIndex >= items.length - 10 && !loading) {
loadMoreItems();
}
};

return (
<div style={{ height: '500px', width: '100%' }}>
<AutoSizer>
{({ width, height }) => (
<List
width={width}
height={height}
rowCount={items.length + 1} // +1 for loading row
rowHeight={50}
rowRenderer={rowRenderer}
onRowsRendered={onRowsRendered}
overscanRowCount={5}
/>
)}
</AutoSizer>
{loading &&
Loading more items...
}

);
}

export default InfiniteLoadingList;

无限加载列表 - 高度不固定

// 4. 无限加载列表 - 高度不固定

虚拟列表react-virtualized使用（npm install react-virtualized）

{item.name}