1. 虛擬化列表 (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 (<div key={key} style={style} className="list-item"><h3>{item.name}</h3><p>{item.description}</p></div>);};return (<Listwidth={600} // 列表寬度height={400} // 列表高度rowCount={list.length} // 總行數rowHeight={80} // 每行高度rowRenderer={rowRenderer} // 行渲染函數overscanRowCount={5} // 預渲染的行數/>)
}export default Index;

2.?可變高度列表 (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 (<CellMeasurerkey={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 (<Listwidth={600} // 列表寬度height={400} // 列表高度deferredMeasurementCache={cache}rowHeight={cache.rowHeight} // 每行高度rowCount={variableData.length} // 總行數rowRenderer={rowRenderer} // 行渲染函數overscanRowCount={3} // 預渲染的行數/>)
}export default Index;

3. 無限加載列表 - 高度固定

// 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 (<div key={key} style={style} className="loading-row">Loading...</div>);}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 }) => (<Listwidth={width}height={height}rowCount={items.length + 1} // +1 for loading rowrowHeight={50}rowRenderer={rowRenderer}onRowsRendered={onRowsRendered}overscanRowCount={5}/>)}</AutoSizer>{loading && <div className="loading-indicator">Loading more items...</div>}</div>);
}export default InfiniteLoadingList;

4. 無限加載列表 - 高度不固定

// 4. 無限加載列表 - 高度不固定