企业官网建设流程全解析

Storybook无限滚动：懒加载列表组件

你是否还在为长列表渲染导致的页面卡顿而烦恼？当列表项超过1000条时，传统渲染方式会造成DOM节点爆炸，严重影响前端性能。本文将教你如何在Storybook中实现高性能的无限滚动列表，通过虚拟列表技术只渲染可视区域内的元素，让百万级数据列表也能流畅滚动。

核心实现原理

无限滚动（Infinite Scroll）通过监听滚动事件，当用户接近列表底部时自动加载更多数据；而虚拟列表（Virtual List）则只渲染当前视口可见的列表项，通过动态计算元素位置实现"无限"滚动效果。Storybook内部已采用该技术优化组件搜索列表，其核心实现位于：

code/core/src/manager/components/sidebar/FileSearchList.tsx

技术选型

Storybook使用@tanstack/react-virtual库实现虚拟列表，该库轻量高效，支持固定高度和动态高度计算。关键代码如下：

import { useVirtualizer } from '@tanstack/react-virtual'; const rowVirtualizer = useVirtualizer({ count, // 总数据量 getScrollElement: () => parentRef.current, // 滚动容器 paddingStart: 16, // 顶部内边距 paddingEnd: 40, // 底部内边距 estimateSize: () => 54, // 预估行高 overscan: 2, // 预渲染上下各2行 });

实现步骤

1. 安装依赖

在Storybook项目中安装虚拟列表库：

npm install @tanstack/react-virtual # 或 yarn add @tanstack/react-virtual

2. 创建虚拟列表组件

创建InfiniteList组件，封装虚拟滚动逻辑：

import React, { useRef } from 'react'; import { useVirtualizer } from '@tanstack/react-virtual'; interface InfiniteListProps { items: any[]; renderItem: (item: any, index: number) => React.ReactNode; itemHeight?: number; } export const InfiniteList = ({ items, renderItem, itemHeight = 50 }: InfiniteListProps) => { const parentRef = useRef<HTMLDivElement>(null); const rowVirtualizer = useVirtualizer({ count: items.length, getScrollElement: () => parentRef.current, estimateSize: () => itemHeight, overscan: 5, }); return ( <div ref={parentRef} style={{ height: '500px', overflow: 'auto', position: 'relative' }} > <div style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative', width: '100%' }} > {rowVirtualizer.getVirtualItems().map(virtualItem => { const item = items[virtualItem.index]; return ( <div key={virtualItem.key} style={{ position: 'absolute', top: 0, left: 0, width: '100%', transform: `translateY(${virtualItem.start}px)`, height: `${virtualItem.size}px`, }} > {renderItem(item, virtualItem.index)} </div> ); })} </div> </div> ); };

3. 编写Storybook故事

在Storybook中创建组件故事，演示无限滚动效果：

import { InfiniteList } from './InfiniteList'; // 生成10000条测试数据 const generateItems = (count: number) => Array.from({ length: count }, (_, i) => ({ id: i, content: `Item ${i + 1}` })); export default { title: 'Components/InfiniteList', component: InfiniteList, }; export const Basic = () => ( <InfiniteList items={generateItems(10000)} renderItem={(item) => ( <div style={{ padding: '16px', borderBottom: '1px solid #eee' }}> {item.content} </div> )} /> ); export const VariableHeight = () => ( <InfiniteList items={generateItems(1000)} itemHeight={80} // 动态高度场景可调整此值 renderItem={(item) => ( <div style={{ padding: `${10 + item.id % 20}px`, borderBottom: '1px solid #eee' }}> Variable height item: {item.content} </div> )} /> );

高级优化技巧

动态高度计算

对于高度不固定的列表项，可通过measureElementAPI实时测量元素高度：

<div ref={el => rowVirtualizer.measureElement(el)} key={virtualItem.key} style={{ position: 'absolute', top: 0, left: 0, width: '100%', transform: `translateY(${virtualItem.start}px)`, }} > {renderItem(item, virtualItem.index)} </div>

数据预加载

结合IntersectionObserver实现数据预加载，当滚动到距离底部一定距离时触发加载：

const loadMoreRef = useRef<HTMLDivElement>(null); useEffect(() => { const observer = new IntersectionObserver( (entries) => { if (entries[0].isIntersecting && !isLoading) { loadMoreData(); // 加载更多数据 } }, { threshold: 0.1 } ); if (loadMoreRef.current) { observer.observe(loadMoreRef.current); } return () => observer.disconnect(); }, [isLoading]); // 在列表底部添加触发加载的元素 <div ref={loadMoreRef} style={{ height: '20px' }} />

性能对比

实际应用案例

Storybook的组件搜索列表采用了虚拟滚动技术，即使项目中有数千个组件文件，也能保持流畅的滚动体验：

官方文档中关于虚拟列表的更多配置选项：docs/writing-stories/args.md

常见问题解决

滚动位置记忆

使用scrollToIndex方法保存和恢复滚动位置：

// 保存滚动位置 const saveScrollPosition = () => { const index = rowVirtualizer.getScrollIndex(); localStorage.setItem('scrollIndex', index.toString()); }; // 恢复滚动位置 useEffect(() => { const savedIndex = localStorage.getItem('scrollIndex'); if (savedIndex) { rowVirtualizer.scrollToIndex(Number(savedIndex)); } }, [rowVirtualizer]);

列表项更新

当列表数据变化时，通过rowVirtualizer.reset()重置虚拟列表：

useEffect(() => { rowVirtualizer.reset(); }, [items, rowVirtualizer]);

总结

通过虚拟列表技术，我们可以轻松实现高性能的无限滚动列表，解决长列表渲染带来的性能问题。Storybook的实现方案已经过生产环境验证，你可以直接参考FileSearchList.tsx中的代码进行集成。

掌握这项技术后，你将能够：

• 处理百万级数据列表而不卡顿
• 优化移动端滚动性能
• 构建更流畅的用户体验

想了解更多前端性能优化技巧，可以关注Storybook官方文档的性能优化章节。

读完本文后，你有什么问题或建议吗？欢迎在评论区留言讨论！