利用React实现虚拟列表的示例代码

目录

• 列表项高度固定
• 代码实现
• 列表项高度动态
• 代码实现
• 思路说明
• 一些需要注意的问题
• 结尾

大家好，我是前端西瓜哥。这次我们来看看虚拟列表是什么玩意，并用 React 来实现两种虚拟列表组件。

虚拟列表，其实就是将一个原本需要全部列表项的渲染的长列表，改为只渲染可视区域内的列表项，但滚动效果还是要和渲染所有列表项的长列表一样。

虚拟列表解决的长列表渲染大量节点导致的性能问题：

• 一次性渲染大量节点，会占用大量 GP 资源，导致卡顿；
• 即使渲染好了，大量的节点也持续占用内存。列表项下的节点越多，就越耗费性能。

虚拟列表的实现分两种，一种是列表项高度固定的情况，另一种是列表项高度动态的情况。

列表项高度固定

列表项高度固定的情况会简单很多，因为我们可以在渲染前就能知道任何一个列表项的位置。

因为涉及到的变量很多，实现起来还是有点繁琐。

我们需要的必要信息有：

• 容器高度（即可视区域高度） containerHeight
• 列表长度（即列表项总数） itemCount
• 列表项尺寸 itemHeight
• 滚动位置 scrollTop

虚拟列表通常来说是垂直方向的，但偶尔也有水平方向的场景，所以如果你要实现一个广泛适用的组件，理论上应该用 size 而不是 height，前者语义更好。

但为了减少用户的思维转换导致的负担，本文会使用 height 来表示一个列表项的高度。

要让表单项渲染在正确位置，我们有几种方案：

• 在容器的第一个元素用一个空元素，设置一个高度，将需要显示在可视区域的 items 往下推到正确位置。我尝试着实现了，发现滚动快一点就会有闪屏现象。
• 将需要渲染的元素一个 div 包裹起来，对这个 div 应用 transform: translate3d(0px, 1000px, 0px);
• 对每个列表项使用绝对定位（或 transform）

这里我们选择第一个方案来进行实现。

代码实现

这里我先给出代码实现。

我们实现了一个 FixedSizeList 的 React 组件。

它接收一个上面提到的几个数量和高度参数外，还接收一个列表项组件。

我们会将计算出来的高度做成 style 对象以及一个索引值 index传入到这个组件里进行实例化。所以记得在列表项组件内接收它们并使用上它们，尤其是 style。

/**
 * 一个将 items 往下推到正确位置的空元素
 */
import { useState } from 'react';
import { flushSync } from 'react-dom';

function FixedSizeList({ containerHeight, itemHeight, itemCount, children }) {
  // children 语义不好，赋值给 Component
  const Component = children;

  const contentHeight = itemHeight * itemCount; // 内容总高度
  const [scrollTop, setScrollTop] = useState(0); // 滚动位置

  // 继续需要渲染的 item 索引有哪些
  let startIdx = Math.floor(scrollTop / itemHeight);
  let endIdx = Math.floor((scrollTop + containerHeight) / itemHeight);

  // 上下额外多渲染几个 item，解决滚动时来不及加载元素出现短暂的空白区域的问题
  const paddingCount = 2;
  startIdx = Math.max(startIdx - paddingCount, 0); // 处理越界情况
  endIdx = Math.min(endIdx + paddingCount, itemCount - 1);

  const top = itemHeight * startIdx; // 第一个渲染的 item 到顶部距离

  // 需要渲染的 items
  const items = [];
  for (let i = startIdx; i <= endIdx; i++) {
    items.push();
  }

  return (
    
 {
        // 处理渲染异步导致的空白现象
        // 改为同步更新，但可能会有性能问题，可以做 节流 + RAF 优化
        flushSync(() => {
          setScrollTop(e.target.scrollTop);
        });
      }}
    >
      
        {/* 一个将 items 往下推到正确位置的空元素 */}
        
        {items}
      

    

  ); }

线上 demo：

https://codesandbox.io/s/jhe2rt

效果：

首先我们需要知道 渲染的节点的索引值范围。

// 计算需要渲染的 item 范围
let startIdx = Math.floor(scrollTop / itemHeight);
let endIdx = Math.floor((scrollTop + containerHeight) / itemHeight);

首先算第一个 item 的位置 startIdx。

我们用 scrollTop 除以列表项高度 itemHeight，我们就知道 scrollTop 经过了多个 item，将得到的结果向下取整就是可视区域中的第一个 item。最后一个索引值 endidx 计算同理。

有时候我们希望上下方向再多渲染几个 item（缓解在做节流时没有立即渲染导致的空白现象），我们可以让范围往两边扩展一些，注意不要越界。

// 扩展范围
const paddingCount = 2;
startIdx = Math.max(startIdx - paddingCount, 0); // 处理越界情况
endIdx = Math.min(endIdx + paddingCount, itemCount - 1);

然后基于这个范围，对列表项组件进行实例化。

// 需要渲染的 items
const items = [];
for (let i = startIdx; i <= endIdx; i++) {
  items.push();
}

然后是 DOM 结构的说明。

 {
    // 处理渲染异步导致的空白现象
    // 改为同步更新，但可能会有性能问题，可以做 节流 + RAF 优化
    flushSync(() => {
      setScrollTop(e.target.scrollTop);
    });
  }}
>
  
    {/* 一个将 items 往下推到正确位置的空元素 */}
    
    {items}