\n
\n );\n};\n\nexport default App;\n","/**\n * 无限滚动列表\n * 使用 `onLoadMore` 和 `hasMore` 属性实现无限滚动，在用户滚动到列表底部时自动加载更多数据。这种功能常见于滚动加载下页数据。\n * 适用于微博、朋友圈等场景，用户不断下滑屏幕，可以不断看到新的动态和信息。\n */\n\nimport VirtualizedList from 'react-virtualized-list';\nimport React, { useState, useEffect } from 'react';\nimport './style/common.css';\n\n// 定义 Item 类型\ninterface Item {\n id: number;\n text: string;\n}\n\nconst InfiniteScrollList: React.FC = () => {\n const [items, setItems] = useState\n
\n 代码示例：虚拟化列表 - V2
\n适用于呈现大量数据的场景，如聊天记录、新闻列表或商品列表。它只渲染当前可见的部分，减少不必要的 DOM 操作和内存消耗，提高页面性能和用户体验。
\n该代码示例，比较全面的用到了所有的 API。代码示例详见：VirtualizedListCustom（代码可直接复制使用）
\n\n \n observerOptions={{\n root: document.querySelector('.content-custom'),\n }}\n listData={listData}\n containerHeight=\"500px\"\n hasMore={hasMore}\n onLoadMore={handleLoadMore}\n loader={
\n 加载更多数据...
}\n endMessage={加载完毕！
}\n emptyListMessage={暂无数据
}\n fetchItemData={getFetchData}\n refreshOnVisible={refreshOnVisible}\n itemStyle={itemStyle}\n itemClassName='item-class'\n itemLoader={<>Not visible，Loading}\n renderItem={(itemData, fetchData) => (\n \n
\n )}\n />\n {itemData}
\n {fetchData ? fetchData : 'Loading data...'}
\n {item.text}
;\n\n return (\n \n
\n );\n};\n\nexport default InfiniteScrollList;\n","import React, { useState } from 'react';\nimport VirtualizedList from 'react-virtualized-list';\n\ninterface Image {\n id: number;\n url: string;\n}\n\ninterface HighResImage {\n highResUrl: string;\n}\n\nconst LazyImage: React.FC = () => {\n const [images, setImages] = useState\n
\n 无限滚动列表 - InfiniteScrollList
\n使用 `onLoadMore` 和 `hasMore` 属性实现无限滚动，在用户滚动到列表底部时自动加载更多数据。这种功能常见于滚动加载下页数据。
\n适用于微博、朋友圈等场景，用户不断下滑屏幕，可以不断看到新的动态和信息。
\n代码示例详见：InfiniteScrollList（代码可直接复制使用）
\n\n \n listData={items}\n renderItem={renderItem}\n containerHeight=\"450px\"\n itemClassName=\"item-class\"\n onLoadMore={loadMoreItems}\n hasMore={hasMore}\n loader={
\n Loading...
}\n endMessage={No more items
}\n />\n \n
\n );\n};\n\nexport default LazyImage;\n","// 动态数据更新（异步数据获取/按需加载）\n// 按需加载每个列表项的数据，减少初始加载时间，提升浏览器加载性能和服务端性能。\n// 例如在商品展示列表中，通过 `fetchItemData` 在用户滚动到特定商品时动态加载详细信息或图片。\nimport React, { useState, useEffect } from 'react';\nimport VirtualizedList from 'react-virtualized-list';\nimport './style/common.css';\n\ninterface Product {\n id: number;\n name: string;\n}\n\ninterface ProductData {\n description: string;\n imageUrl: string;\n}\n\nconst fetchProductData = async (product: Product): Promise\n
\n 数据懒加载 - LazyImage
\n适用于需要懒加载的场景，可以延迟加载大量DOM、图片或视频，只有在即将进入视口时才加载，减少页面加载时间和带宽占用。
\n通过 `renderItem` 和 `fetchItemData` 实现图片缩略图和高分辨率图片的懒加载。代码示例详见：LazyImage（代码可直接复制使用）
\n\n \n listData={images}\n renderItem={renderItem}\n containerHeight='450px'\n itemClassName='item-class-img'\n fetchItemData={fetchImageData}\n refreshOnVisible={true}\n />\n
\n \n
\n );\n};\n\nexport default DynamicInfiniteList;\n","// 视口内自动刷新内容\n// 在用户滚动时自动刷新视口内的内容。例如，在新闻应用中，动态加载新的文章，并这种功能确保用户始终能够获取到最新的新闻资讯。\n// 新闻列表 example\nimport React, { useState, useEffect } from 'react';\nimport VirtualizedList from 'react-virtualized-list';\nimport './style/common.css';\n\ninterface Article {\n id: number;\n title: string;\n content: string;\n}\n\ninterface ArticleData {\n title: string;\n content: string;\n}\n\nconst fetchArticleData = async (article: Article): Promise\n
\n 动态数据更新（异步数据获取/按需加载）
\n按需加载每个列表项的数据，减少初始加载时间，提升浏览器加载性能和服务端性能。
\n例如在商品展示列表中，通过 `fetchItemData` 在用户滚动到特定商品时动态加载详细信息或图片。
\n代码示例详见：DynamicInfiniteList（代码可直接复制使用）
\n\n (\n
\n \n 
}\n
\n )}\n itemClassName='item-class-dynamic'\n fetchItemData={fetchProductData}\n onLoadMore={loadMoreProducts}\n hasMore={hasMore}\n containerHeight='500px'\n loader='Loading more products...'\n endMessage='No more products'\n />\n {product.name}
\n{data ? data.description : 'Loading...'}
\n {data && data.imageUrl &&\n
\n );\n};\n\nexport default RefreshOnVisible;\n","import React, { useState, useEffect, useCallback } from 'react';\nimport VirtualizedList from 'react-virtualized-list';\nimport './style/common.css';\n\ninterface ListItemData {\n id: number;\n name: string;\n // 其他项目属性\n}\n\nconst fetchData = async (index: number): Promise\n
\n 视口内自动刷新内容
\n在用户滚动时自动刷新视口内的内容，例如在新闻应用中动态加载最新的文章内容，滚动回之前的新闻位置时，自动更新最新内容。
\n通过配置 `refreshOnVisible`，确保用户始终获取到最新的新闻内容。代码示例详见：RefreshOnVisable（代码可直接复制使用）
\n\n \n listData={articles}\n renderItem={(article, data) => (\n
\n \n
\n )}\n fetchItemData={fetchArticleData}\n refreshOnVisible={true}\n itemClassName='item-class-refresh'\n containerHeight='500px'\n itemLoader={<>Loading article...}\n />\n {data ? data.title : 'Loading...'}
\n{data ? data.content : 'Loading...'}
\n{item.name}
;\n };\n\n return (\n \n
\n \n );\n};\n\nexport default BigDataListExample;\n","import React from 'react';\nimport { Radio, Tabs } from 'antd';\nimport './App.css';\nimport VirtualizedListCustom from './examples/VirtualizedListCustom';\nimport InfiniteScrollList from './examples/InfiniteScrollList';\nimport LazyImage from './examples/LazyImage';\nimport DynamicInfiniteList from './examples/DynamicInfiniteList';\nimport RefreshOnVisable from './examples/RefreshOnVisable';\nimport BigDataListExample from './examples/BigDataListExample';\n\n\nconst items = [\n { key: 'BigDataListExample', label: '大数据列表', content: \n
\n 代码示例：大型数据列表
\n当需要渲染一个包含大量数据的列表时，直接渲染所有项目会导致浏览器性能下降。VirtualizedList 通过仅渲染可见的项目，大大提高了性能和响应速度。
\n代码示例详见：BigDataListExample（代码可直接复制使用）
\n\n loading ...
}\n loader={加载中 ...
}\n endMessage={已加载所有数据
}\n emptyListMessage={没有数据
}\n />\n \n \n {\n items.map(item => {\n return (\n \n {item.content}\n \n )\n })\n }\n \n
\n );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\n// 确保 'root' 元素存在\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n const root = ReactDOM.createRoot(rootElement);\n root.render(\n // React 的严格模式会故意使组件重新渲染两次，以便更容易发现潜在的副作用和其他问题。\n // 适用场景
\n \n
\n );\n};\n\nexport default App;\n","/**\n * 无限滚动列表\n * 使用 `onLoadMore` 和 `hasMore` 属性实现无限滚动，在用户滚动到列表底部时自动加载更多数据。这种功能常见于滚动加载下页数据。\n * 适用于微博、朋友圈等场景，用户不断下滑屏幕，可以不断看到新的动态和信息。\n */\n\nimport VirtualizedList from 'react-virtualized-list';\nimport React, { useState, useEffect } from 'react';\nimport './style/common.css';\n\n// 定义 Item 类型\ninterface Item {\n id: number;\n text: string;\n}\n\nconst InfiniteScrollList: React.FC = () => {\n const [items, setItems] = useState\n
\n 代码示例：虚拟化列表 - V2
\n适用于呈现大量数据的场景，如聊天记录、新闻列表或商品列表。它只渲染当前可见的部分，减少不必要的 DOM 操作和内存消耗，提高页面性能和用户体验。
\n该代码示例，比较全面的用到了所有的 API。代码见VirtualizedListCustom
\n\n \n observerOptions={{\n root: document.querySelector('.content-custom'),\n }}\n listData={listData}\n containerHeight=\"500px\"\n hasMore={hasMore}\n onLoadMore={handleLoadMore}\n loader={
\n 加载更多数据...
}\n endMessage={加载完毕！
}\n emptyListMessage={暂无数据
}\n fetchItemData={getFetchData}\n refreshOnVisible={refreshOnVisible}\n itemStyle={itemStyle}\n itemClassName='item-class'\n itemLoader={<>Not visible，Loading}\n renderItem={(itemData, fetchData) => (\n \n
\n )}\n />\n {itemData}
\n {fetchData ? fetchData : 'Loading data...'}
\n {item.text}
;\n\n return (\n \n
\n );\n};\n\nexport default InfiniteScrollList;\n","import React, { useState } from 'react';\nimport VirtualizedList from 'react-virtualized-list';\n\ninterface Image {\n id: number;\n url: string;\n}\n\ninterface HighResImage {\n highResUrl: string;\n}\n\nconst LazyImage: React.FC = () => {\n const [images, setImages] = useState\n
\n 无限滚动列表 - InfiniteScrollList
\n\n 使用 `onLoadMore` 和 `hasMore` 属性实现无限滚动，在用户滚动到列表底部时自动加载更多数据。这种功能常见于滚动加载下页数据。\n
\n\n 适用于微博、朋友圈等场景，用户不断下滑屏幕，可以不断看到新的动态和信息。代码见\n \n InfiniteScrollList\n \n
\n\n \n listData={items}\n renderItem={renderItem}\n containerHeight=\"450px\"\n itemClassName=\"item-class\"\n onLoadMore={loadMoreItems}\n hasMore={hasMore}\n loader={
\n Loading...
}\n endMessage={No more items
}\n />\n \n
\n );\n};\n\nexport default LazyImage;\n","// 动态数据更新（异步数据获取/按需加载）\n// 按需加载每个列表项的数据，减少初始加载时间，提升浏览器加载性能和服务端性能。\n// 例如在商品展示列表中，通过 `fetchItemData` 在用户滚动到特定商品时动态加载详细信息或图片。\nimport React, { useState, useEffect } from 'react';\nimport VirtualizedList from 'react-virtualized-list';\nimport './style/common.css';\n\ninterface Product {\n id: number;\n name: string;\n}\n\ninterface ProductData {\n description: string;\n imageUrl: string;\n}\n\nconst fetchProductData = async (product: Product): Promise\n
\n 数据懒加载 - LazyImage
\n适用于需要懒加载的场景，可以延迟加载大量DOM、图片或视频，只有在即将进入视口时才加载，减少页面加载时间和带宽占用。
\n通过 `renderItem` 和 `fetchItemData` 实现图片缩略图和高分辨率图片的懒加载。代码见LazyImage
\n\n \n listData={images}\n renderItem={renderItem}\n containerHeight='450px'\n itemClassName='item-class-img'\n fetchItemData={fetchImageData}\n refreshOnVisible={true}\n />\n
\n \n
\n