当前位置: 首页 > article >正文

react实现虚拟列表

在前端开发中,当一次性渲染大量数据时,直接渲染所有DOM节点,会造成渲染过慢,浏览器卡顿的现象,导致用户体验不佳,为了改善这种情况,提出使用虚拟列表的方式进行渲染。
虚拟列表的实现思路
1.只渲染可见区域:
计算当前可见区域的起始索引和结束索引。
只渲染可见区域内的列表项,其他区域用空白占位。
2.动态计算高度:
如果列表项高度固定,可以直接计算。
如果列表项高度不固定,需要动态计算每个列表项的高度。
3.滚动时更新渲染:
监听滚动事件,动态更新可见区域的列表项。
实现步骤
以下是实现虚拟列表的关键步骤:

  1. 固定高度的虚拟列表
    假设列表项高度固定,实现较为简单。
  2. 动态高度的虚拟列表
    列表项高度不固定,需要动态计算。
    代码实现
    固定高度的虚拟列表
    以下是一个固定高度的虚拟列表实现:
import React, { useState, useRef, useCallback } from "react";

const VirtualList = ({ data, itemHeight, visibleCount }) => {
  const [startIndex, setStartIndex] = useState(0); // 起始索引
  const containerRef = useRef(null); // 容器引用

  // 计算可见区域的数据
  const visibleData = data.slice(startIndex, startIndex + visibleCount);

  // 处理滚动事件
  const handleScroll = useCallback(() => {
    if (containerRef.current) {
      const scrollTop = containerRef.current.scrollTop;
      const newStartIndex = Math.floor(scrollTop / itemHeight);
      setStartIndex(newStartIndex);
    }
  }, [itemHeight]);

  return (
    <div
      ref={containerRef}
      style={{
        height: `${visibleCount * itemHeight}px`,
        overflow: "auto",
        border: "1px solid #ccc",
      }}
      onScroll={handleScroll}
    >
      <div
        style={{
          height: `${data.length * itemHeight}px`,
          position: "relative",
        }}
      >
        {visibleData.map((item, index) => (
          <div
            key={startIndex + index}
            style={{
              position: "absolute",
              top: `${(startIndex + index) * itemHeight}px`,
              width: "100%",
              height: `${itemHeight}px`,
              boxSizing: "border-box",
              borderBottom: "1px solid #eee",
            }}
          >
            {item}
          </div>
        ))}
      </div>
    </div>
  );
};

export default VirtualList;

使用示例

import React from "react";
import VirtualList from "./VirtualList";

const App = () => {
  const data = Array.from({ length: 10000 }, (_, index) => `Item ${index + 1}`);

  return (
    <div>
      <h1>Virtual List Example</h1>
      <VirtualList data={data} itemHeight={50} visibleCount={10} />
    </div>
  );
};

export default App;

动态高度的虚拟列表
如果列表项高度不固定,需要动态计算高度并缓存。以下是一个简单的实现思路:
初始化时测量高度:
渲染一个隐藏的列表项,测量其高度并缓存。
滚动时动态更新:
根据缓存的高度计算可见区域的起始索引和结束索引。

import React, { useState, useRef, useCallback, useEffect } from "react";

const DynamicVirtualList = ({ data, visibleCount }) => {
  const [startIndex, setStartIndex] = useState(0);
  const [heights, setHeights] = useState([]); // 缓存高度
  const containerRef = useRef(null);
  const itemRefs = useRef([]); // 列表项引用

  // 初始化时测量高度
  useEffect(() => {
    const newHeights = itemRefs.current.map(
      (ref) => ref?.getBoundingClientRect().height || 0
    );
    setHeights(newHeights);
  }, [data]);

  // 计算可见区域的数据
  const visibleData = data.slice(startIndex, startIndex + visibleCount);

  // 计算总高度
  const totalHeight = heights.reduce((sum, height) => sum + height, 0);

  // 计算起始偏移量
  const offset = heights.slice(0, startIndex).reduce((sum, height) => sum + height, 0);

  // 处理滚动事件
  const handleScroll = useCallback(() => {
    if (containerRef.current) {
      const scrollTop = containerRef.current.scrollTop;
      let newStartIndex = 0;
      let sum = 0;
      while (sum + heights[newStartIndex] < scrollTop) {
        sum += heights[newStartIndex];
        newStartIndex++;
      }
      setStartIndex(newStartIndex);
    }
  }, [heights]);

  return (
    <div
      ref={containerRef}
      style={{
        height: "500px",
        overflow: "auto",
        border: "1px solid #ccc",
      }}
      onScroll={handleScroll}
    >
      <div style={{ height: `${totalHeight}px`, position: "relative" }}>
        {visibleData.map((item, index) => (
          <div
            key={startIndex + index}
            ref={(el) => (itemRefs.current[startIndex + index] = el)}
            style={{
              position: "absolute",
              top: `${offset}px`,
              width: "100%",
              boxSizing: "border-box",
              borderBottom: "1px solid #eee",
            }}
          >
            {item}
          </div>
        ))}
      </div>
    </div>
  );
};

export default DynamicVirtualList;

使用示例

import React from "react";
import DynamicVirtualList from "./DynamicVirtualList";

const App = () => {
  const data = Array.from({ length: 10000 }, (_, index) => `Item ${index + 1}`);

  return (
    <div>
      <h1>Dynamic Virtual List Example</h1>
      <DynamicVirtualList data={data} visibleCount={10} />
    </div>
  );
};

export default App;

http://www.kler.cn/a/589824.html

相关文章:

  • MYsql—1
  • 【Linux系统】进程地址空间详解
  • GLOW-TTS
  • Yolo v4 (Darknet) Mac M2 安装与运行
  • 前端UnoCSS面试题及参考答案
  • Forward Looking Radar Imaging by Truncated Singular Value Decomposition 论文阅读
  • gitlab将本地项目提交到远程dev分支
  • 【JAVA】深入浅出理解Comparator 和 Comparable接口
  • 【免费】怎么将MP4转换为GIF,如何在线实现多媒体文件格式互转
  • 【网络】数据流(Data Workflow)Routes(路由)、Controllers(控制器)、Models(模型) 和 Middleware(中间件)
  • 【004】deepseek本地化部署后,python的调用方式_#py
  • 【虚幻C++笔记】TArray,TMap,TSet容器
  • QListView、QListWidget、QTableView和QTableWidget
  • 【MySQL】MySQL是如何处理请求的?
  • JMeter 性能测试
  • P41-指针进阶1、2
  • 基于 YOLOv8 和 PyQt5 的火焰、烟雾检测
  • Grokking System Design 系统设计面试问题
  • 用UML搞懂ASPICE(6)过程能力确定的能力维度
  • [蓝桥杯 2023 省 B] 飞机降落