虚拟列表react-virtualized使用(npm install react-virtualized)

  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 (


    {item.name}


    {item.description}



    );
    };

    复制代码
     return (
         <List
             width={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 (
             <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. 无限加载列表 - 高度固定

    // 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. 无限加载列表 - 高度不固定

  • 相关推荐
    小毛驴8509 分钟前
    创建 Vue 项目的 4 种主流方式
    前端·javascript·vue.js
    誰能久伴不乏38 分钟前
    Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
    java·服务器·前端
    涔溪2 小时前
    响应式前端设计:CSS 自适应布局与字体大小的最佳实践
    前端·css
    今禾2 小时前
    前端开发中的Mock技术:深入理解vite-plugin-mock
    前端·react.js·vite
    你这个年龄怎么睡得着的2 小时前
    Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
    前端·javascript·vite
    我想说一句2 小时前
    掘金移动端React开发实践:从布局到样式优化的完整指南
    前端·react.js·前端框架
    jqq6662 小时前
    Vue3脚手架实现(九、渲染typescript配置)
    前端
    码间舞2 小时前
    Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
    前端·react.js
    Dream耀2 小时前
    提升React移动端开发效率:Vant组件库
    前端·javascript·前端框架
    冰菓Neko2 小时前
    HTML 常用标签速查表
    前端·html