强劲性能，海量数据呈现：虚拟列表的魅力

前端

2023-10-01 17:03:53

虚拟列表：海量数据的救星

在现代应用程序中，经常会遇到需要处理和展示海量数据的场景。传统列表渲染方式在面对数万乃至数百万条数据时，会遇到性能瓶颈和内存消耗过大的问题。此时，虚拟列表技术便应运而生，成为解决这一难题的利器。

虚拟列表通过只渲染当前可见的数据项来优化性能。它仅在需要时创建和销毁数据项，从而避免了对所有数据项进行渲染的巨大消耗。同时，虚拟列表还会根据用户滚动行为动态调整渲染范围，进一步提升渲染效率。

原理解读：虚拟列表的运作机制

虚拟列表的工作原理并不复杂。它将数据项抽象为一个个虚拟单元格，并根据当前滚动位置和窗口大小计算出可见单元格的范围。只有这些可见单元格才会被实际渲染并显示在屏幕上。

当用户滚动列表时，虚拟列表会动态更新可见单元格的范围，并销毁超出范围的单元格，同时创建新的单元格以填充可见区域。这种按需渲染的方式极大地减少了渲染开销，提高了列表的滚动流畅度。

实战运用：构建高效的虚拟列表

在实际应用中，使用虚拟列表技术构建高效的长列表渲染组件并不困难。这里以 React 为例，介绍一种常用的实现方式：

import { useState, useEffect, useRef } from "react";
import { useMemo } from "react";

const VirtualList = ({ items, itemHeight, estimatedItemHeight }) => {
  const listRef = useRef();
  const [startIndex, setStartIndex] = useState(0);
  const [endIndex, setEndIndex] = useState(0);

  const visibleItemCount = Math.ceil(listRef.current?.clientHeight / itemHeight) + 1;

  const visibleItems = useMemo(() => {
    const startIndex = Math.max(0, Math.floor(listRef.current?.scrollTop / itemHeight));
    const endIndex = Math.min(items.length - 1, startIndex + visibleItemCount - 1);
    return items.slice(startIndex, endIndex + 1);
  }, [listRef.current?.scrollTop, listRef.current?.clientHeight, itemHeight, items]);

  useEffect(() => {
    const list = listRef.current;

    const onScroll = () => {
      setStartIndex(Math.max(0, Math.floor(list.scrollTop / itemHeight)));
      setEndIndex(Math.min(items.length - 1, startIndex + visibleItemCount - 1));
    };

    list.addEventListener("scroll", onScroll);
    return () => list.removeEventListener("scroll", onScroll);
  }, [listRef.current, itemHeight, items, visibleItemCount]);

  return (
    <div ref={listRef} style={{ height: "100%", overflow: "auto" }}>
      {visibleItems.map((item, index) => (
        <div key={index} style={{ height: itemHeight }}>
          {item}
        </div>
      ))}
    </div>
  );
};