深入解析前端虚拟列表的进阶实现

前端

2023-09-12 22:54:56

在之前的文章《聊聊前端开发中的长列表》中，我们介绍了「可视区域渲染」的列表，并写了一个简化的例子来展现如何实现。这种列表一般叫做 Virtual List，在本文中会使用「虚拟列表」来指代。

在本文中，我们会把上篇文章中的简化例子一步步强化成一个相对通用、性能优异的虚拟列表。

优化策略

可视区域渲染

虚拟列表最核心的优化策略就是只渲染可视区域内的元素。这种策略可以大大减少需要渲染的元素数量，从而提升渲染性能。

滚动缓存

滚动缓存是一种优化策略，它可以减少虚拟列表在滚动时需要重新渲染的元素数量。滚动缓存的工作原理是将可视区域外但即将进入可视区域的元素预先渲染好，并在需要时直接插入到可视区域中。

DOM重用

DOM重用是一种优化策略，它可以减少虚拟列表在重新渲染时需要创建和销毁的DOM元素数量。DOM重用的工作原理是将不再需要的DOM元素保存在一个池中，并在需要时从池中取出并重新使用。

示例代码

import { useState, useEffect } from "react";

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

  useEffect(() => {
    const updateIndices = () => {
      const visibleHeight = window.innerHeight;
      const scrollTop = window.pageYOffset;
      const startIndex = Math.floor(scrollTop / itemHeight);
      const endIndex = Math.ceil((scrollTop + visibleHeight) / itemHeight);

      setStartIndex(startIndex);
      setEndIndex(endIndex);
    };

    window.addEventListener("scroll", updateIndices);

    return () => {
      window.removeEventListener("scroll", updateIndices);
    };
  }, [itemHeight]);

  const renderedItems = items.slice(startIndex, endIndex);

  return (
    <div>
      {renderedItems.map((item, index) => (
        <div key={index} style={{ height: itemHeight }}>
          {item}
        </div>
      ))}
    </div>
  );
};

export default VirtualList;