react-window深度解析：高效渲染十万级列表的React组件库
项目地址: https://gitcode.com/gh_mirrors/re/react-window 引言：前端列表渲染的性能困境与解决方案
你是否曾遇到过这样的场景：在React应用中渲染包含成千上万条数据的列表时，页面变得卡顿、滚动不流畅，甚至出现浏览器崩溃？当列表数据量达到十万级别时，传统的渲染方式往往会导致DOM节点数量暴增，严重影响页面性能和用户体验。
react-window（React视窗组件库）正是为解决这一痛点而生。它通过虚拟列表（Virtual List） 技术，只渲染当前视窗内可见的列表项，从而在有限的DOM节点数量下高效展示海量数据。本文将深入剖析react-window的实现原理、核心组件、性能优化策略以及实际应用场景，帮助你彻底掌握这一高性能列表渲染解决方案。
读完本文后，你将能够：
- 理解虚拟列表的工作原理及react-window的核心优势
- 熟练使用FixedSizeList、VariableSizeList等核心组件
- 掌握react-window的性能优化技巧和高级用法
- 解决十万级数据列表的渲染性能问题
- 在实际项目中正确选择和配置react-window组件
react-window简介：什么是虚拟列表？
传统列表渲染的性能瓶颈
在传统的列表渲染方式中，我们通常会为每一条数据创建一个DOM节点。当数据量较大（例如10万条）时，这会导致：
- DOM节点数量过多：大量的DOM节点会占用大量内存，导致页面初始化缓慢
- 重排重绘频繁：滚动时大量DOM节点的重排重绘会导致卡顿
- React渲染压力大：React需要管理和更新大量组件实例，增加了渲染负担
以下是一个传统列表渲染的示例代码，它在数据量较大时会出现明显的性能问题：
// 传统列表渲染方式 - 性能问题严重
function BigList({ items }) {
return (
<div style={{ height: '500px', overflow: 'auto' }}>
{items.map(item => (
<div key={item.id} style={{ height: '50px', padding: '10px' }}>
{item.content}
</div>
))}
</div>
);
}
虚拟列表的工作原理
虚拟列表（Virtual List），也称为"窗口化"（Windowing）技术，其核心思想是只渲染当前视窗内可见的列表项，而不是所有数据。它通过以下方式实现高效渲染：
- 计算可见区域：根据容器尺寸和滚动位置，计算当前可见的列表项范围
- 渲染可见项：只渲染可见范围内的列表项，保持少量DOM节点
- 动态更新：滚动时动态更新可见列表项，并复用DOM节点
- 使用占位元素：通过设置容器内的空白占位元素，模拟完整列表的滚动效果
虚拟列表工作原理示意图
react-window的核心优势
react-window作为一个轻量级的虚拟列表库，具有以下核心优势：
- 高性能：只渲染可见区域的列表项，大幅减少DOM节点数量
- 轻量级：体积小（约3KB gzip压缩），无依赖
- 灵活的组件设计：提供固定尺寸和可变尺寸的列表与网格组件
- 易于集成：与React生态系统无缝集成，支持React 16+
- 丰富的API：提供滚动到指定项、测量尺寸等实用功能
快速上手：react-window的安装与基础使用
安装react-window
你可以通过npm或yarn安装react-window：
# 使用npm安装
npm install react-window
# 使用yarn安装
yarn add react-window
# 如需从源码安装，可克隆仓库
git clone https://gitcode.com/gh_mirrors/re/react-window
cd react-window
npm install
npm run build
基础示例：使用FixedSizeList渲染十万条数据
下面是一个使用FixedSizeList组件渲染十万条数据的基础示例：
import { FixedSizeList as List } from 'react-window';
// 生成10万条测试数据
const items = Array.from({ length: 100000 }, (_, i) => ({
id: i,
content: `列表项 ${i + 1}`
}));
function VirtualizedList() {
// 渲染单个列表项
const Row = ({ index, style }) => (
<div style={style}>
{items[index].content}
</div>
);
return (
<div>
<h2>react-window 十万级列表渲染示例</h2>
<List
height={500} // 列表容器高度
itemCount={items.length} // 列表项总数
itemSize={50} // 每个列表项高度
width="100%" // 列表容器宽度
>
{Row}
</List>
</div>
);
}
export default VirtualizedList;
在这个示例中，即使我们有10万条数据，react-window也只会渲染当前可见区域的列表项（通常只有10-20个），从而保证了高效的渲染性能。
核心组件概览
react-window提供了四个核心组件，分别用于不同的使用场景：
| 组件名称 | 用途 | 特点 |
|---|---|---|
| FixedSizeList | 渲染固定高度/宽度的列表 | 最简单常用，性能最优 |
| VariableSizeList | 渲染高度/宽度可变的列表 | 支持每个列表项有不同尺寸 |
| FixedSizeGrid | 渲染固定尺寸的网格 | 二维网格布局，行列尺寸固定 |
| VariableSizeGrid | 渲染可变尺寸的网格 | 二维网格布局，行列尺寸可变 |
这些组件都位于react-window的主模块中，可以通过以下方式导入：
// 导入所有核心组件
import {
FixedSizeList,
VariableSizeList,
FixedSizeGrid,
VariableSizeGrid
} from 'react-window';
核心组件深入解析
FixedSizeList：固定尺寸列表
FixedSizeList是react-window中最常用的组件，用于渲染所有列表项尺寸相同的列表。它的工作原理是假设所有列表项具有相同的高度（垂直列表）或宽度（水平列表），从而简化计算，提高性能。
基本属性与用法
FixedSizeList的基本属性如下：
<FixedSizeList
height={500} // 列表容器高度
width="100%" // 列表容器宽度
itemCount={100000} // 列表项总数
itemSize={50} // 每个列表项高度（像素）
columnCount={1} // 列数（默认为1）
direction="vertical" // 滚动方向："vertical"或"horizontal"
className="my-list" // 自定义CSS类名
style={{ border: '1px solid #ccc' }} // 内联样式
>
{Row} {/* 列表项渲染函数 */}
</FixedSizeList>
列表项渲染函数接收以下参数：
const Row = ({
index, // 当前列表项索引
style, // 由react-window生成的样式对象，必须应用到列表项
isScrolling // 是否正在滚动中（用于优化）
}) => {
return (
<div style={style}>
列表项 {index}: {data[index]}
</div>
);
};
注意：
style属性包含了定位信息，是实现虚拟滚动的关键，必须应用到列表项元素上。
水平滚动列表
FixedSizeList也支持水平滚动列表，只需设置direction="horizontal"并调整相关尺寸属性：
<FixedSizeList
height={100} // 列表容器高度
width="100%" // 列表容器宽度
itemCount={1000} // 列表项总数
itemSize={150} // 每个列表项宽度（像素）
direction="horizontal" // 水平滚动
>
{({ index, style }) => (
<div style={style} className="horizontal-item">
水平列表项 {index}
</div>
)}
</FixedSizeList>
高级功能：滚动到指定项
FixedSizeList提供了scrollToItem方法，可以滚动到指定索引的列表项：
import { useRef } from 'react';
import { FixedSizeList as List } from 'react-window';
function ScrollToListExample() {
const listRef = useRef(null);
const scrollToIndex = (index) => {
listRef.current.scrollToItem(index, {
align: 'center' // 对齐方式："start" | "center" | "end" | "auto"
});
};
return (
<div>
<button onClick={() => scrollToIndex(1000)}>
滚动到第1000项
</button>
<List
ref={listRef}
height={500}
width="100%"
itemCount={100000}
itemSize={50}
>
{({ index, style }) => (
<div style={style}>列表项 {index}</div>
)}
</List>
</div>
);
}
VariableSizeList：可变尺寸列表
当列表项具有不同高度（或宽度）时，FixedSizeList不再适用，这时我们需要使用VariableSizeList组件。它允许每个列表项有不同的尺寸，通过提供一个尺寸计算函数来动态获取每个列表项的尺寸。
基本用法
VariableSizeList的基本用法与FixedSizeList类似，但需要提供itemSize函数而非固定值：
import { VariableSizeList as List } from 'react-window';
// 模拟不同高度的列表项
const getRandomHeight = (index) => {
// 根据索引生成不同的高度，范围在30-100px之间
return 30 + (index % 8) * 10;
};
function VariableHeightList() {
return (
<List
height={500}
width="100%"
itemCount={10000}
// 提供一个函数来获取每个列表项的高度
itemSize={index => getRandomHeight(index)}
>
{({ index, style }) => (
<div style={style}>
列表项 {index} (高度: {getRandomHeight(index)}px)
</div>
)}
</List>
);
}
尺寸缓存与更新
VariableSizeList会缓存已计算的列表项尺寸以提高性能。当列表项尺寸发生变化时，需要调用resetAfterIndex方法来清除缓存：
function VariableListWithDynamicSize() {
const listRef = useRef(null);
const [sizes, setSizes] = useState({});
// 设置指定索引的新尺寸
const updateItemSize = (index, newSize) => {
setSizes(prev => ({ ...prev, [index]: newSize }));
// 重置缓存，使新尺寸生效
listRef.current.resetAfterIndex(index - 1);
};
// 获取列表项尺寸
const getItemSize = index => sizes[index] || 50;
return (
<List
ref={listRef}
height={500}
width="100%"
itemCount={100}
itemSize={getItemSize}
>
{({ index, style }) => (
<div style={style}>
<span>列表项 {index}</span>
<button onClick={() => updateItemSize(index, 100)}>
增大尺寸
</button>
</div>
)}
</List>
);
}
FixedSizeGrid与VariableSizeGrid：网格布局
除了列表布局，react-window还提供了网格布局组件，用于渲染表格数据或图片网格等二维数据结构。
FixedSizeGrid：固定尺寸网格
FixedSizeGrid适用于行列尺寸固定的网格布局：
import { FixedSizeGrid as Grid } from 'react-window';
function ImageGallery() {
const COLUMN_COUNT = 5; // 列数
const ROW_COUNT = 2000; // 行数
const CELL_SIZE = 150; // 单元格尺寸（像素）
return (
<Grid
columnCount={COLUMN_COUNT}
columnWidth={CELL_SIZE}
height={800}
rowCount={ROW_COUNT}
rowHeight={CELL_SIZE}
width="100%"
>
{({ columnIndex, rowIndex, style }) => {
const index = rowIndex * COLUMN_COUNT + columnIndex;
return (
<div style={style}>
<img
src={`https://picsum.photos/seed/${index}/150/150`}
alt={`图片 ${index}`}
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>
</div>
);
}}
</Grid>
);
}
VariableSizeGrid：可变尺寸网格
当网格的行高或列宽不固定时，可以使用VariableSizeGrid组件：
import { VariableSizeGrid as Grid } from 'react-window';
function VariableSizeDataGrid() {
// 动态计算行高和列宽
const getColumnWidth = columnIndex => {
// 第一列宽度为150px，其他列宽度为100px
return columnIndex === 0 ? 150 : 100;
};
const getRowHeight = rowIndex => {
// 标题行高度为60px，其他行高度为40px
return rowIndex === 0 ? 60 : 40;
};
return (
<Grid
columnCount={10}
columnWidth={getColumnWidth}
height={600}
rowCount={1000}
rowHeight={getRowHeight}
width="100%"
>
{({ columnIndex, rowIndex, style }) => {
// 渲染表头
if (rowIndex === 0) {
return (
<div style={{ ...style, background: '#f0f0f0', fontWeight: 'bold' }}>
列 {columnIndex}
</div>
);
}
// 渲染数据单元格
return (
<div style={{ ...style, borderBottom: '1px solid #eee' }}>
单元格 ({rowIndex}, {columnIndex})
</div>
);
}}
</Grid>
);
}
性能优化：让react-window发挥最佳性能
react-window本身已经非常高效，但在处理极端数据量或复杂列表项时，我们还可以通过以下策略进一步优化性能。
列表项组件优化
使用React.memo避免不必要的重渲染
列表项组件如果比较复杂，频繁的重渲染会影响性能。使用React.memo可以 memoize 列表项组件，避免不必要的重渲染：
import React, { memo } from 'react';
// 使用React.memo优化列表项组件
const MemoizedRow = memo(({ index, style, data }) => {
// 复杂的列表项渲染逻辑
return (
<div style={style}>
<h4>Item {index}</h4>
<p>{data[index].content}</p>
</div>
);
}, (prevProps, nextProps) => {
// 自定义比较函数：只有当index或data[index]变化时才重渲染
return (
prevProps.index === nextProps.index &&
prevProps.data[prevProps.index] === nextProps.data[nextProps.index]
);
});
// 在列表中使用优化后的组件
<FixedSizeList
height={500}
width="100%"
itemCount={data.length}
itemSize={80}
>
{({ index, style }) => (
<MemoizedRow index={index} style={style} data={data} />
)}
</FixedSizeList>
避免在列表项中创建函数
在列表项渲染函数中创建新函数会导致每次渲染时函数引用变化，破坏React.memo的优化效果：
// 不好的做法：每次渲染都会创建新的handleClick函数
const Row = ({ index, style }) => (
<div style={style}>
<button onClick={() => handleItemClick(index)}>点击</button>
</div>
);
// 好的做法：使用useCallback或绑定到组件实例
const handleClick = useCallback((index) => {
console.log('点击了列表项', index);
}, []);
const Row = memo(({ index, style, onClick }) => (
<div style={style}>
<button onClick={() => onClick(index)}>点击</button>
</div>
));
// 使用时传递稳定的函数引用
<FixedSizeList ...>
{({ index, style }) => (
<Row index={index} style={style} onClick={handleClick} />
)}
</FixedSizeList>
尺寸计算优化
预计算与缓存尺寸
对于VariableSizeList或VariableSizeGrid，频繁计算尺寸会影响性能。可以预计算并缓存尺寸：
// 预计算并缓存尺寸
const itemSizes = useMemo(() => {
const sizes = new Array(itemCount);
for (let i = 0; i < itemCount; i++) {
sizes[i] = calculateItemSize(i); // 计算尺寸的函数
}
return sizes;
}, [itemCount]);
// 使用缓存的尺寸
<VariableSizeList
itemSize={index => itemSizes[index]}
...
/>
使用estimatedItemSize提高初始渲染性能
VariableSizeList提供了estimatedItemSize属性，可以在实际尺寸计算完成前使用估计尺寸，提高初始渲染性能：
<VariableSizeList
height={500}
width="100%"
itemCount={10000}
itemSize={index => getActualItemSize(index)}
estimatedItemSize={70} // 估计的平均尺寸
/>
渲染优化
使用isScrolling属性延迟加载
利用isScrolling属性，可以在滚动过程中简化渲染内容，滚动停止后再渲染完整内容：
const Row = ({ index, style, isScrolling, data }) => {
// 滚动过程中只渲染简化内容
if (isScrolling) {
return <div style={style}>加载中...</div>;
}
// 滚动停止后渲染完整内容
return (
<div style={style}>
<h4>{data[index].title}</h4>
<p>{data[index].content}</p>
<img src={data[index].imageUrl} alt={data[index].title} />
</div>
);
};
虚拟列表窗口大小优化
通过设置overscanCount属性，可以在可见区域之外预渲染一些列表项，减少滚动时的空白闪烁。但overscanCount过大会增加DOM节点数量，影响性能，需要权衡设置：
// 优化滚动体验：预渲染可见区域前后各5个列表项
<FixedSizeList
...
overscanCount={5} // 默认值为5，可根据实际情况调整
/>
大数据量优化策略
数据分片加载
当数据量超过100万条时，即使使用虚拟列表，一次性加载所有数据也会占用大量内存。可以实现数据分片加载：
function PagedVirtualList() {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const listRef = useRef(null);
// 初始加载第一页数据
useEffect(() => {
loadPage(0);
}, []);
// 加载指定页的数据
const loadPage = async (page) => {
setLoading(true);
try {
const newItems = await fetchData(page, 1000); // 每页加载1000条
setData(prev => [...prev, ...newItems]);
} finally {
setLoading(false);
}
};
// 检测滚动位置，当接近底部时加载下一页
const handleItemsRendered = ({ visibleStartIndex, visibleStopIndex }) => {
const totalItems = data.length;
// 当可见项接近当前数据末尾时加载下一页
if (!loading && visibleStopIndex > totalItems - 100) {
loadPage(Math.floor(totalItems / 1000));
}
};
return (
<FixedSizeList
ref={listRef}
height={500}
width="100%"
itemCount={loading ? data.length + 10 : data.length}
itemSize={50}
onItemsRendered={handleItemsRendered}
>
{({ index, style }) => {
if (index >= data.length) {
return <div style={style}>加载中...</div>;
}
return <div style={style}>{data[index]}</div>;
}}
</FixedSizeList>
);
}
使用web workers处理复杂计算
如果列表项的尺寸计算或内容处理非常复杂，可以使用web workers在后台线程处理，避免阻塞主线程：
// worker.js - 在Web Worker中计算复杂尺寸
self.onmessage = (e) => {
const { index, data } = e.data;
// 复杂的尺寸计算逻辑
const size = complexSizeCalculation(data);
self.postMessage({ index, size });
};
// 主线程组件
function WorkerOptimizedList() {
const [itemSizes, setItemSizes] = useState({});
const workerRef = useRef(null);
useEffect(() => {
// 创建Web Worker
workerRef.current = new Worker('./worker.js');
// 接收Worker消息
workerRef.current.onmessage = (e) => {
const { index, size } = e.data;
setItemSizes(prev => ({ ...prev, [index]: size }));
};
return () => {
workerRef.current.terminate();
};
}, []);
const getItemSize = useCallback((index) => {
// 如果尺寸尚未计算，返回默认值
if (!itemSizes[index]) {
// 向Worker发送计算请求
workerRef.current.postMessage({
index,
data: items[index]
});
return 50; // 默认尺寸
}
return itemSizes[index];
}, [items, itemSizes]);
return (
<VariableSizeList
height={500}
width="100%"
itemCount={items.length}
itemSize={getItemSize}
>
{({ index, style }) => (
<div style={style}>{items[index].content}</div>
)}
</VariableSizeList>
);
}
实际应用场景与最佳实践
大数据表格渲染
react-window的FixedSizeGrid和VariableSizeGrid组件非常适合渲染大数据表格。下面是一个高性能数据表格的实现示例：
import { FixedSizeGrid } from 'react-window';
import { useMemo } from 'react';
function DataTable({ columns, data }) {
// 计算列宽和行高
const columnWidth = useMemo(
() => columns.map(col => col.width || 150),
[columns]
);
const rowHeight = 50; // 行高
// 渲染表头
const renderHeader = ({ columnIndex, style }) => {
const column = columns[columnIndex];
return (
<div
style={{
...style,
fontWeight: 'bold',
background: '#f5f5f5',
borderBottom: '1px solid #ddd',
display: 'flex',
alignItems: 'center',
padding: '0 10px'
}}
>
{column.label}
</div>
);
};
// 渲染表格内容单元格
const renderCell = ({ columnIndex, rowIndex, style }) => {
const rowData = data[rowIndex];
const column = columns[columnIndex];
const value = rowData[column.key];
return (
<div
style={{
...style,
borderBottom: '1px solid #eee',
display: 'flex',
alignItems: 'center',
padding: '0 10px'
}}
>
{column.render ? column.render(value, rowData) : value}
</div>
);
};
return (
<div style={{ height: '600px', border: '1px solid #ddd' }}>
{/* 表头 */}
<div style={{ height: rowHeight, borderBottom: '1px solid #ddd' }}>
<FixedSizeGrid
columnCount={columns.length}
columnWidth={index => columnWidth[index]}
height={rowHeight}
rowCount={1}
rowHeight={rowHeight}
width="100%"
>
{renderHeader}
</FixedSizeGrid>
</div>
{/* 表格内容 */}
<FixedSizeGrid
columnCount={columns.length}
columnWidth={index => columnWidth[index]}
height={550}
rowCount={data.length}
rowHeight={rowHeight}
width="100%"
>
{renderCell}
</FixedSizeGrid>
</div>
);
}
// 使用示例
function App() {
const columns = [
{ key: 'id', label: 'ID', width: 80 },
{ key: 'name', label: '姓名', width: 120 },
{ key: 'email', label: '邮箱', width: 200 },
{ key: 'status', label: '状态', render: (value) => (
<span style={{
padding: '3px 8px',
borderRadius: '4px',
background: value === 'active' ? '#4CAF50' : '#f44336',
color: 'white',
fontSize: '12px'
}}>
{value === 'active' ? '活跃' : '禁用'}
</span>
)}
];
// 生成10万条测试数据
const data = useMemo(() =>
Array.from({ length: 100000 }, (_, i) => ({
id: i + 1,
name: `用户${i + 1}`,
email: `user${i + 1}@example.com`,
status: i % 5 === 0 ? 'inactive' : 'active'
})), []);
return <DataTable columns={columns} data={data} />;
}
无限滚动列表实现
结合react-window和滚动监听，可以实现高性能的无限滚动列表：
import { FixedSizeList } from 'react-window';
import { useState, useEffect, useRef } from 'react';
function InfiniteScrollList() {
const [items, setItems] = useState([]);
const [hasMore, setHasMore] = useState(true);
const [loading, setLoading] = useState(false);
const [page, setPage] = useState(1);
// 模拟API请求
const fetchItems = async (pageNum) => {
setLoading(true);
try {
// 模拟网络延迟
await new Promise(resolve => setTimeout(resolve, 1000));
// 生成100条测试数据
const newItems = Array.from({ length: 100 }, (_, i) => ({
id: (pageNum - 1) * 100 + i + 1,
content: `Item ${(pageNum - 1) * 100 + i + 1}`,
timestamp: new Date().toLocaleString()
}));
// 模拟只有10页数据
if (pageNum > 10) {
setHasMore(false);
return [];
}
return newItems;
} catch (error) {
console.error('Failed to fetch items:', error);
return [];
} finally {
setLoading(false);
}
};
// 初始加载第一页
useEffect(() => {
fetchItems(1).then(newItems => {
setItems(newItems);
});
}, []);
// 加载更多数据
const loadMoreItems = async () => {
if (!hasMore || loading) return;
const nextPage = page + 1;
const newItems = await fetchItems(nextPage);
if (newItems.length > 0) {
setItems(prevItems => [...prevItems, ...newItems]);
setPage(nextPage);
}
};
// 监听滚动位置，当接近底部时加载更多
const handleItemsRendered = ({ visibleStopIndex }) => {
// 当可见项接近当前列表末尾时加载更多
if (visibleStopIndex >= items.length - 10 && hasMore && !loading) {
loadMoreItems();
}
};
// 渲染列表项
const Row = ({ index, style }) => {
// 加载中状态显示加载指示器
if (index >= items.length) {
return (
<div style={style} className="loading-row">
<div className="spinner"></div>
<span>加载中...</span>
</div>
);
}
const item = items[index];
return (
<div style={style} className="list-item">
<h4>#{item.id}: {item.content}</h4>
<p className="timestamp">{item.timestamp}</p>
</div>
);
};
return (
<div className="infinite-scroll-container">
<h2>无限滚动列表示例</h2>
<FixedSizeList
height={600}
width="100%"
itemCount={hasMore ? items.length + 10 : items.length}
itemSize={80}
onItemsRendered={handleItemsRendered}
overscanCount={5}
>
{Row}
</FixedSizeList>
{!hasMore && (
<div className="end-message">
已经到底了，没有更多数据了
</div>
)}
<style jsx>{`
.list-item {
padding: 10px;
border-bottom: 1px solid #eee;
}
.timestamp {
color: #666;
font-size: 0.8em;
margin: 5px 0 0 0;
}
.loading-row {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: #666;
}
.spinner {
width: 20px;
height: 20px;
border: 3px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top-color: #007bff;
animation: spin 1s ease-in-out infinite;
margin-right: 10px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.end-message {
text-align: center;
padding: 20px;
color: #666;
}
`}</style>
</div>
);
}
虚拟列表与拖拽排序
结合react-window和react-beautiful-dnd，可以实现高性能的拖拽排序列表：
import { FixedSizeList as List } from 'react-window';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
function DraggableVirtualList({ items, onDragEnd }) {
// 渲染可拖拽的列表项
const DraggableRow = ({ index, style, provided }) => {
const item = items[index];
return (
<Draggable draggableId={item.id.toString()} index={index}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
...style,
...provided.draggableProps.style,
padding: '10px',
borderBottom: '1px solid #eee',
backgroundColor: '#fff'
}}
>
<span>☰</span> {/* 拖拽手柄 */}
<span style={{ marginLeft: '10px' }}>{item.content}</span>
</div>
)}
</Draggable>
);
};
return (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="virtual-list">
{(provided) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
>
<List
height={500}
width="100%"
itemCount={items.length}
itemSize={60}
>
{({ index, style }) => (
<DraggableRow
index={index}
style={style}
/>
)}
</List>
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
);
}
// 使用示例
function App() {
const [items, setItems] = useState(
Array.from({ length: 1000 }, (_, i) => ({
id: i,
content: `可拖拽项 ${i + 1}`
}))
);
// 处理拖拽结束事件
const handleDragEnd = (result) => {
if (!result.destination) return;
const newItems = Array.from(items);
const [removed] = newItems.splice(result.source.index, 1);
newItems.splice(result.destination.index, 0, removed);
setItems(newItems);
};
return (
<div>
<h2>可拖拽排序的虚拟列表</h2>
<DraggableVirtualList items={items} onDragEnd={handleDragEnd} />
</div>
);
}
常见问题与解决方案
列表项高度动态变化
当列表项高度动态变化时（例如展开/折叠内容），需要通知react-window更新尺寸缓存：
function CollapsibleList() {
const [expandedItems, setExpandedItems] = useState({});
const listRef = useRef(null);
// 切换列表项展开/折叠状态
const toggleExpand = (index) => {
setExpandedItems(prev => ({
...prev,
[index]: !prev[index]
}));
// 重置尺寸缓存，使新尺寸生效
if (listRef.current) {
listRef.current.resetAfterIndex(index);
}
};
// 获取列表项高度
const getItemHeight = (index) => {
return expandedItems[index] ? 150 : 50; // 展开时高度150px，折叠时50px
};
return (
<VariableSizeList
ref={listRef}
height={500}
width="100%"
itemCount={100}
itemSize={getItemHeight}
>
{({ index, style }) => (
<div style={style} className="collapsible-item">
<button
onClick={() => toggleExpand(index)}
className="toggle-button"
>
{expandedItems[index] ? '−' : '+'}
</button>
<span>列表项 {index}</span>
{expandedItems[index] && (
<div className="expanded-content">
这是展开后的详细内容...
<br />
这部分内容会增加列表项的高度。
</div>
)}
</div>
)}
</VariableSizeList>
);
}
列表项点击事件处理
在react-window中处理列表项点击事件很简单，但需要注意不要在渲染函数中创建新函数：
function ListWithClickHandlers() {
const [selectedIndex, setSelectedIndex] = useState(-1);
// 使用useCallback确保函数引用稳定
const handleItemClick = useCallback((index) => {
console.log('点击了列表项:', index);
setSelectedIndex(index);
}, []);
return (
<FixedSizeList
height={500}
width="100%"
itemCount={1000}
itemSize={50}
>
{({ index, style }) => (
<div
style={{
...style,
padding: '10px',
borderBottom: '1px solid #eee',
backgroundColor: selectedIndex === index ? '#b3d4fc' : 'white',
cursor: 'pointer'
}}
onClick={() => handleItemClick(index)}
>
列表项 {index}
{selectedIndex === index && <span> ✔️</span>}
</div>
)}
</FixedSizeList>
);
}
滚动位置保存与恢复
在某些场景下（如路由切换后返回列表），需要保存并恢复滚动位置：
import { FixedSizeList as List } from 'react-window';
import { useRef, useEffect } from 'react';
import { useLocation, useHistory } from 'react-router-dom';
function ListWithScrollRestore() {
const listRef = useRef(null);
const location = useLocation();
const history = useHistory();
const scrollPositions = useRef({});
// 保存当前滚动位置
const saveScrollPosition = () => {
if (listRef.current) {
const scrollOffset = listRef.current.scrollOffset;
scrollPositions.current[location.pathname] = scrollOffset;
}
};
// 恢复滚动位置
const restoreScrollPosition = () => {
if (listRef.current && scrollPositions.current[location.pathname] !== undefined) {
listRef.current.scrollTo(scrollPositions.current[location.pathname]);
}
};
// 路由变化时保存滚动位置
useEffect(() => {
const unlisten = history.listen(saveScrollPosition);
restoreScrollPosition();
return () => {
saveScrollPosition();
unlisten();
};
}, [location.pathname, history]);
return (
<List
ref={listRef}
height={500}
width="100%"
itemCount={1000}
itemSize={50}
>
{({ index, style }) => (
<div style={style} className="list-item">
列表项 {index}
</div>
)}
</List>
);
}
总结与展望
react-window的核心价值
react-window通过虚拟列表技术，解决了React应用中大数据量列表渲染的性能问题。它的核心价值在于：
- 高效性能：只渲染可见区域的列表项，大幅减少DOM节点数量
- 简单易用：API设计简洁直观，易于集成到现有项目
- 灵活多样：提供固定尺寸和可变尺寸的列表与网格组件
- 轻量级：体积小，无依赖，对项目负担小
与其他虚拟列表库的比较
| 特性 | react-window | react-virtualized | react-window-infinite-loader |
|---|---|---|---|
| 包体积 | ~3KB (gzip) | ~30KB (gzip) | ~1KB (gzip) |
| 功能完整性 | 基础功能 | 完整丰富 | 无限滚动扩展 |
| 学习曲线 | 简单 | 中等 | 简单 |
| 性能 | 优秀 | 良好 | 优秀 |
| 活跃维护 | 是 | 停止维护 | 是 |
react-window是react-virtualized的轻量级替代品，由同一作者开发。如果你需要更简单、更轻量的解决方案，react-window是更好的选择；如果你需要更丰富的功能（如表格、树等），可以考虑使用react-virtualized。
未来发展趋势
随着Web应用对性能要求的不断提高，虚拟列表技术将继续发展。未来可能的趋势包括：
- 更好的React Server Components支持：结合服务端渲染提高首屏加载性能
- WebAssembly优化：使用WebAssembly实现更高效的尺寸计算和布局
- 自动尺寸检测：更智能的尺寸计算，减少手动配置
- 更好的无障碍支持：改进键盘导航和屏幕阅读器支持
推荐学习资源
- 官方文档：https://react-window.vercel.app/
- GitHub仓库：https://gitcode.com/gh_mirrors/re/react-window
- 示例代码库：https://github.com/bvaughn/react-window-examples
- 作者博客：https://medium.com/@brianvaughn
通过本文的学习，你已经掌握了react-window的核心概念、使用方法和性能优化技巧。现在，你可以在自己的项目中应用这一强大的虚拟列表库，解决十万级甚至百万级数据的渲染性能问题，为用户提供流畅的列表浏览体验。
如果你觉得本文对你有帮助，请点赞、收藏并关注，以便获取更多前端性能优化的实用技巧！
祝你的React应用永远保持流畅高效！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
