您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 493人已围观

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

列表项高度固定

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

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

我们需要的必要信息有：

容器高度（即可视区域高度） 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}

最外层是“容器 div”，我们给它的高度设置传入的 containerHeight。

接着是“内容 div”。contentHeight 由 itemHeight 乘以 itemCount 计算而来，代表的是所有 item 组成的高度。我们把它放着这里，是为了让 “容器 div” 产生正确的滚动条。

内容 div 下是我们的 items，以及开头的 一个将 items 往下推到正确位置的空元素，可以看作是一种 padding-top。它的高度值 top 由 itemHeight 乘以 startIdx 计算而来。

然后是监听滚动事件，当 scrollTop 改变时，更新组件。我这里使用的是 React18，默认是并发模式，更新状态 setState 是异步的，因此在快速滚动的情况下，会出现渲染不实时导致的短暂空白现象。

所以这里我用了 ReactDOM 的 flushSync 方法，让状态的更新变成同步的，来解决短暂空白问题。

但滚动是一个高频触发的时间，我的这种写法在列表项复杂的情况下，是可能会出现性能问题的。更好的做法是做 函数节流 + RAF（requestAnimationFrame），虽然也会有一些空白现象，但不会太严重。

列表项高度动态

列表项高度动态的情况，就复杂得多。

如果能够 在渲染前知道所有列表项的高度，那实现思路还是同前面列表项高度固定的情况一致。

只是我们不能用乘法来计算了，要改成累加的方式来计算 startIdx 和 endIdx。

然而实际上更常见的情况是列表项 高度根据内容自适应，只能在渲染完成后才能知道真正高度。

怎么办呢？通常的方式是 提供一个列表项预设高度，在列表项渲染完成后，再更新高度。

代码实现

我们先给出实现：

import { forwardRef, useState } from 'react'; import { flushSync } from 'react-dom'; // 动态列表组件 const VariableSizeList = forwardRef(   ({ containerHeight, getItemHeight, itemCount, itemData, children }, ref) => {     ref.current = {       resetHeight: () => {         setOffsets(genOffsets());       }     };     // children 语义不好，赋值给 Component     const Component = children;     const [scrollTop, setScrollTop] = useState(0); // 滚动位置     // 根据 getItemHeight 生成 offsets     // 本质是前缀和     const genOffsets = () => {       const a = [];       a[0] = getItemHeight(0);       for (let i = 1; i < itemCount; i++) {         a[i] = getItemHeight(i) + a[i - 1];       }       return a;     };     // 所有 items 的位置     const [offsets, setOffsets] = useState(() => {       return genOffsets();     });     // 找 startIdx 和 endIdx     // 这里用了普通的查找，更好的方式是二分查找     let startIdx = offsets.findIndex((pos) => pos > scrollTop);     let endIdx = offsets.findIndex((pos) => pos > scrollTop + containerHeight);     if (endIdx === -1) endIdx = itemCount;     const paddingCount = 2;     startIdx = Math.max(startIdx - paddingCount, 0); // 处理越界情况     endIdx = Math.min(endIdx + paddingCount, itemCount - 1);     // 计算内容总高度     const contentHeight = offsets[offsets.length - 1];     // 需要渲染的 items     const items = [];     for (let i = startIdx; i <= endIdx; i++) {       const top = i === 0 ? 0 : offsets[i - 1];       const height = i === 0 ? offsets[0] : offsets[i] - offsets[i - 1];       items.push(                );     }     return (        {           flushSync(() => {             setScrollTop(e.target.scrollTop);           });         }}       >         {items}

); } );

线上 demo：

https://codesandbox.io/s/4oy84f

效果：

思路说明

和列表项等高的实现不同，这里不能传一个固定值 itemHeight，改为传入一个根据 index 获取列表项宽度函数 getItemHeight(index)。

组件会通过这个函数，来拿到不同列表项的高度，来计算出 offsets 数组。offsets 是每个列表项的底边到顶部的距离。offsets 的作用是在滚动到特定位置时，计算出需要渲染的列表项有哪些。

当然你也可以用高度数组，但查找起来并没有优势，你需要累加。offsets 是 heights 的累加缓存结果（其实也就是前缀和）。

假设几个列表项的高度数组 heights 为 [10, 20, 40, 100]，那么 offsets 就是 [10, 30, 70, 170]。一推导公式为：offsets[i] = offsets[i-1] + heights[i]

下面是计算 offsets 的代码：

const genOffsets = () => {   const a = [];   a[0] = getItemHeight(0);   for (let i = 1; i < itemCount; i++) {     a[i] = getItemHeight(i) + a[i - 1];   }   return a; }; // 所有 items 的位置 const [offsets, setOffsets] = useState(() => {   return genOffsets(); });

getItemHeight 在列表项能渲染前，会提供一个预估高度 estimatedItemHeight。

// 高度数组，当列表项渲染完成时，更新它 const heightsRef = useRef(new Array(100)); // 预估高度 const estimatedItemHeight = 40; const getHeight = (index) => {   return heightsRef.current[index] ?? estimatedItemHeight; };

这里我用 genOffsets 函数生成了一个完整的 offsets 数组。

其实，我们也可以考虑做 惰性计算：一开始不计算出整个 offsets ，而是只计算前几个 item 的 offset，并通过这几个高度来推测一个总内容高度。然后在后面滚动时再一点点补充 offset，再一点点修正总内容高度。

为了让调用者可以手动触发高度的重新计算。虚拟列表组件通过 ref 提供了一个 resetHeight 方法来重置缓存的高度。

ref.current = {   resetHeight: () => {     setOffsets(genOffsets());   } }; // 使用方式  listRef.current.resetHeight();

计算出 offsets 数组后，我们就可以计算需要渲染的列表项的起始（startIdx）和结束（endIdx）位置了。

因为 offsets 是有序数组，我们需要用 高效的二分查找 去查找，时间复杂度为 O(log n)。

（这里我偷懒直接用了从左往右查找，没有去做二分查找的实现）

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：vue双向数据绑定指令v-model的用法_vue.js_

下一篇：一文详解如何清除手机上小程序缓存_javascript技巧_

您现在的位置是：网站首页> 编程资料编程资料

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

目录

列表项高度固定

代码实现

列表项高度动态

代码实现

思路说明

相关内容

点击排行

本栏推荐

猜你喜欢