React虚拟列表的实现

1.背景

在开发过程中,总是遇到很多列表的显示。当上数量级别的列表渲染于浏览器,终会导致浏览器的性能下降。如果数据量过大,首先渲染极慢,其次页面直接卡死。当然,你可以选择其他方式避免。例如分页,或者下载文件等等。我们这里讨论如果使用虚拟列表来解决这个问题。

2.什么是虚拟列表

最简单的描述:列表滚动时,变更可视区域内的渲染元素。

通过 [单条数据预估高度] 计算出 [列表总高度]和[可视化区域高度 ]。并在[可视化区域高度]内按需渲染列表。

3.相关概念简介

下面介绍在组件中,很重要的一些参数信息,这里先进行了解,有个印象,后续在使用的时候才比较明朗。

  • [单条数据预估高度]: 列表中具体某一条列表的具体高度,它可以是 [固定高度],也可以是[动态高度]
  • [列表总高度]: 当所有数据渲染时,列表的[总高度]
  • [可视化区域高度]: 挂在虚拟列表的容器。即列表可见的区域
  • [预估显示条数]: 在 [可视化区域高度] 按照 [单条数据预估高度],可见的数据条数
  • [开始索引]: [可视化区域高度] 显示的数据的第一条数据的索引
  • [结束索引]: [可视化区域高度] 显示的数据的最后一条数据的索引
  • [每条Item 位置缓存]: 因为列表的高度不一定,因此会对每条数据的高度位置进行记录,包括 index索引,top, bottom, lineHeight属性

4.虚拟列表实现

虚拟列表可以简单理解为:当列表发生滚动时,变更[可视化区域高度 ]内的渲染元素,根据上面介绍的相关概念,我们依据这些属性,按照以下步骤进行:

  • 传入组件数据 [数据列表(resources)] 和 [预估高度(estimatedItemSize]
  • 根据 [数据列表(resources)]和 [预估高度(estimatedItemSize] 计算出每条数据的初始位置(当全部渲染时每条数据的占位)
  • 计算出 [列表总高度]
  • [可视化区域高度] 通过css控制
  • 根据 [可视化区域高度],计算出可视化区域预估显示条数
  • 初始化可视窗口的 [头挂载元素]和[尾挂载元素],当发生滚动时,根据滚动差值和滚动方向,重新计算[头挂载元素]和[尾挂载元素]。

依据以上的简介步骤,下面开始来实现一个虚拟列表吧。

4.1 驱动开发:参数剖析

参数 说明 类型 默认值
resources 源数据数组 Array []
estimatedItemSize 每条数据的预估高度 number 32px
extrea 用于自定义ItemRender,传递其他参数 any none
ItemRender 每一条数据渲染的组件 React.FC const ItemRender = ({ data }: Data) => (<React.Fragment>{String(data) }</React.Fragment>)
key 作为遍历时,生成item 的唯一key。需要是resources的数据具体的某个唯一值的字段。用于提高性能。 string 默认顺序 自定义 -> id -> key -> index

4.1.1 ItemRender

import React, { useState } from 'react';
import { VirtualList } from 'biz-web-library';
// 定义每一条数据显示的组件
const ItemRender = ({ data }) => {
  let dindex = parseInt(data);
  let lineHeight = dindex % 2 ? '40px' : '80px';
  return (
    <div style={{ lineHeight, background: dindex % 2 ? '#f5f5f5' : '#fff' }}>
      <h3>#{dindex} title name</h3>
      <p>尽情地书写你想编写的内容,不局限于页面高度</p>
    </div>
  );
};
const ItemRenderMemo = React.memo(ItemRender);

4.1.2 数据列表初始化

// 初始化列表数据
const getDatas = () => {
  const datas = [];
  for (let i = 0; i < 100000; i++) {
    datas.push(`${i} Item`);
  }
  return datas;
};

4.1.3 如何使用

// 使用虚拟列表
export default () => {
  let [resources, setResources] = useState([]);
  const changeResources = () => {
    setResources(getDatas());
  };

  return (
    <div>
      <button onClick={changeResources}>click me </button>

      <div
        style={{
          height: '400px',
          overflow: 'auto',
          border: '1px solid #f5f5f5',
          padding: '0 10px',
        }}
      >
        <VirtualList
          ItemRender={ItemRenderMemo}
          resources={resources}
          estimatedItemSize={60}
        />
      </div>
    </div>
  );
};

4.2 组件初始化计算和布局

现在,如何使用已经知道,那么开始实现我们的组件吧。根据传入的数据源resources和预估高度estimatedItemSize,计算出每一条数据的初始化位置。

// 循环缓存列表的总体初始化高度
export const initPositinoCache = (
  estimatedItemSize: number = 32,
  length: number = 0,
) => {
  let index = 0,
  positions = Array(length);
  while (index < length) {
    positions[index] = {
      index,
      height: estimatedItemSize,
      top: index * estimatedItemSize,
      bottom: (index++ + 1) * estimatedItemSize,
    };
  }
  return positions;
};

如果列表每条数据的高度一致,那么这个高度确实是不会改变的。如果每一条数据的高度不固定,那么该位置会在滚动的过程中进行更新。下面统计一些其他需要初始化的参数:

参数 说明 类型 默认值
resources 源数据数组 Array []
startOffset 可视区域距离顶部的偏移量 number 0
listHeight 所有数据渲染时,容器的高度 any none
visibleCount 一页可视化区域条数 number 10
startIndex 可视化区域开始索引 number 0
endIndex 可视化区域结束索引 number 10
visibleData 可视化区域显示的数据 Array []

其实对于每一个属性,介绍一下就清楚它的意义所在。但是 [startOffset]这个参数需要重点介绍一下。它就是在滚动过程中,模拟无限滚动的重要属性。它的值,表示我们滚动过程中距离顶部的位置。[startOffset]通过结合[visibleData]达到了无限滚动的效果。
tips: 这里注意 [positions]的位置,相当于一个组件的外部变量。记得不要挂在到组件的static属性上面。

// 缓存所有item的位置
let positions: Array<PositionType>;

class VirtualList extends React.PureComponent{

  constructor(props) {
    super(props);
    const { resources } = this.props;

    // 初始化缓存
    positions = initPositinoCache(props.estimatedItemSize, resources.length);
    this.state = {
      resources,
      startOffset: 0,
      listHeight: getListHeight(positions),  // positions最后一条数据的bottom属性

      scrollRef: React.createRef(),  // 虚拟列表容器ref
      items: React.createRef(), // 虚拟列表显示区域ref
      visibleCount: 10, // 一页可视区域条数
      startIndex: 0, // 可视区域开始索引
      endIndex: 10, // // 可视区域结束索引
    };
  }
  // TODO: 隐藏一些其他功能。。。。。

  // 布局
  render() {
  const { ItemRender = ItemRenderComponent, extrea } = this.props;
  const { listHeight, startOffset, resources, startIndex, endIndex, items, scrollRef  } = this.state;
  let visibleData = resources.slice(startIndex, endIndex);

  return (
    <div ref={scrollRef} style={{ height: `${listHeight}px` }}>
      <ul
        ref={items}
        style={{
          transform: `translate3d(0,${startOffset}px,0)`,
        }}
      >
        {visibleData.map((data, index) => {
          return (
            <li key={data.id || data.key || index} data-index={`${startIndex + index}`}>
              <ItemRender data={data} {...extrea}/>
            </li>
          );
        })}
      </ul>
    </div>
  );
  }
}

4.3 滚动触发注册事件与更新

将onScroll通过[componentDidMount]注册到dom上。滚动事件中,使用的requestAnimationFrame,该方法是利用浏览器的空余时间进行执行,可以提高代码的性能。大家想进行深入理解,可以去查阅该api的具体使用。

componentDidMount() {
  events.on(this.getEl(), 'scroll', this.onScroll, false);
  events.on(this.getEl(), 'mousewheel', NOOP, false);

  // 根据渲染,计算最新的节点
  let visibleCount = Math.ceil(this.getEl().offsetHeight / estimatedItemSize);
  if (visibleCount === this.state.visibleCount || visibleCount === 0) {
    return;
  }
  // 因为 visibleCount变更, 更新endIndex, listHeight/ 偏移量
  this.updateState({ visibleCount, startIndex: this.state.startIndex });
}

getEl = () => {
    let el = this.state.scrollRef || this.state.items;
    let parentEl: any = el.current?.parentElement;
    switch (window.getComputedStyle(parentEl)?.overflowY) {
      case 'auto':
      case 'scroll':
      case 'overlay':
      case 'visible':
        return parentEl;
    }
    return document.body;
};

onScroll = () => {
    requestAnimationFrame(() => {
      let { scrollTop } = this.getEl();
      let startIndex = binarySearch(positions, scrollTop);

      // 因为 startIndex变更, 更新endIndex, listHeight/ 偏移量
      this.updateState({ visibleCount: this.state.visibleCount, startIndex});
    });
  };

接下来我们分析一下重点步骤。当进行滚动时,我们是可以拿到当前[scrollRef]虚拟列表容器的 [scrollTop],通过该距离和[positions](记录了每个item的所有位置属性),可以拿到该位置的startIndex。这里为提高性能,我们通过二分法查找:

// 工具函数,放入工具文件
export const binarySearch = (list: Array<PositionType>, value: number = 0) => {
  let start: number = 0;
  let end: number = list.length - 1;
  let tempIndex = null;
  while (start <= end) {
    let midIndex = Math.floor((start + end) / 2);
    let midValue = list[midIndex].bottom;

    // 值相等,则直接返回 查找到的节点(因为是bottom, 因此startIndex应该是下一个节点)
    if (midValue === value) {
      return midIndex + 1;
    }
    // 中间值 小于 传入值,则说明 value对应的节点 大于 start, start往后移动一位
    else if (midValue < value) {
      start = midIndex + 1;
    }
    // 中间值 大于 传入值,则说明 value 在 中间值之前,end 节点移动到 mid - 1
    else if (midValue > value) {
      // tempIndex存放最靠近值为value的所有
      if (tempIndex === null || tempIndex > midIndex) {
        tempIndex = midIndex;
      }
      end = midIndex - 1;
    }
  }
  return tempIndex;
};

获取到startIndex,那么我们就依据startIndex来更新组件State中所有的属性的值。

 updateState = ({ visibleCount, startIndex }) => {
    // 根据新计算的节点,更新data数据
    this.setState({
      startOffset: startIndex >= 1 ? positions[startIndex - 1]?.bottom : 0,
      listHeight: getListHeight(positions),
      startIndex,
      visibleCount,
      endIndex: getEndIndex(this.state.resources, startIndex, visibleCount)
    });
  };

// 下面是工具函数,放在其他文件中的
export const getListHeight = (positions: Array<PositionType>) => {
    let index = positions.length - 1;
    return index < 0 ? 0 : positions[index].bottom;
  };

export const getEndIndex = (
  resources: Array<Data>,
  startIndex: number,
  visibleCount: number,
) => {
  let resourcesLength = resources.length;
  let endIndex = startIndex + visibleCount;
  return resourcesLength > 0 ? Math.min(resourcesLength, endIndex) : endIndex;
}

4.4 item高度不等更新

至此,我们对于基本的dom进行滚动,数据更新等逻辑完成。但是在测试过程中,会发现,如果高度不等,还没进行更新position等操作呢?这些放在哪里呢?
这里,我们的[componentDidUpdate]就该派上用场了。每一次dom完成渲染,那么此时就应该将显示出来的item的 位置高度信息更新到 [position]属性中。当前 总高度[istHeight] 和偏移量[startOffset]也得同时进行更新。

 componentDidUpdate() {
  this.updateHeight();
}

updateHeight = () => {
  let items: HTMLCollection = this.state.items.current?.children;
  if (!items.length) return;

  // 更新缓存
  updateItemSize(positions, items);

  // 更新总高度
  let listHeight = getListHeight(positions);

  // 更新总偏移量
  let startOffset = getStartOffset(this.state.startIndex, positions);

  this.setState({
    listHeight,
    startOffset,
  });
};

// 下面是工具函数,放在其他文件中的
export const updateItemSize = (
  positions: Array<PositionType>,
  items: HTMLCollection,
) => {
  Array.from(items).forEach(item => {
    let index = Number(item.getAttribute('data-index'));
    let { height } = item.getBoundingClientRect();
    let oldHeight = positions[index].height;

    //存在差值, 更新该节点以后所有的节点
    let dValue = oldHeight - height;
    if (dValue) {
      positions[index].bottom = positions[index].bottom - dValue;
      positions[index].height = height;

      for (let k = index + 1; k < positions.length; k++) {
        positions[k].top = positions[k - 1].bottom;
        positions[k].bottom = positions[k].bottom - dValue;
      }
    }
  });
};

//获取当前的偏移量
export const getStartOffset = (
  startIndex: number,
  positions: Array<PositionType> = [],
) => {
  return startIndex >= 1 ? positions[startIndex - 1]?.bottom : 0;
};

export const getListHeight = (positions: Array<PositionType>) => {
  let index = positions.length - 1;
  return index < 0 ? 0 : positions[index].bottom;
};

4.5 外部参数数据变更,更新组件数据

当前最后一步,如果我们传入的外部数据源等进行了变更,那么我们就得同步数据。该操作当然是发放在 getDerivedStateFromProps方法完成。

 static getDerivedStateFromProps(
    nextProps: VirtualListProps,
    prevState: VirtualListState,
  ) {
    const { resources, estimatedItemSize } = nextProps;
    if (resources !== prevState.resources) {
      positions = initPositinoCache(estimatedItemSize, resources.length);

      // 更新高度
      let listHeight = getListHeight(positions);

      // 更新总偏移量
      let startOffset = getStartOffset(prevState.startIndex, positions);

      let endIndex = getEndIndex(resources, prevState.startIndex, prevState.visibleCount);

      return {
        resources,
        listHeight,
        startOffset,
        endIndex,
      };
    }
    return null;
  }

5 结束语

好了,一个完整的vitural list组件完成,该组件因为每条数据ItemRender的render函数时自定义,所以只要是列表形式,你想虚拟滚动谁,都可以。当然,根据查阅网上的资料,图片的相关的滚动,因为网络问题,无法保证获取列表项的真是高度,从而可能造成不准确的情况。这里暂不做讨论,有兴趣的小伙伴可以再次深入。

到此这篇关于React虚拟列表的实现的文章就介绍到这了,更多相关React虚拟列表内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React实现一个高度自适应的虚拟列表

    近期在某平台开发迭代的过程中遇到了超长List嵌套在antd Modal里加载慢,卡顿的情况.于是心血来潮决定从零自己实现一个虚拟滚动列表来优化一下整体的体验. 改造前: 我们可以看出来在改造之前,打开编辑窗口Modal的时候会出现短暂的卡顿,并且在点击Cancel关闭后也并不是立即响应而是稍作迟疑之后才关闭的 改造后: 改造完成后我们可以观察到整个Modal的打开比之前变得流畅了不少,可以做到立即响应用户的点击事件唤起/关闭Modal 性能对比Demo: codesandbox.io/s/a-

  • React虚拟列表的实现

    1.背景 在开发过程中,总是遇到很多列表的显示.当上数量级别的列表渲染于浏览器,终会导致浏览器的性能下降.如果数据量过大,首先渲染极慢,其次页面直接卡死.当然,你可以选择其他方式避免.例如分页,或者下载文件等等.我们这里讨论如果使用虚拟列表来解决这个问题. 2.什么是虚拟列表 最简单的描述:列表滚动时,变更可视区域内的渲染元素. 通过 [单条数据预估高度] 计算出 [列表总高度]和[可视化区域高度 ].并在[可视化区域高度]内按需渲染列表. 3.相关概念简介 下面介绍在组件中,很重要的一些参数信

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

    目录 列表项高度固定 代码实现 列表项高度动态 代码实现 思路说明 一些需要注意的问题 结尾 大家好,我是前端西瓜哥.这次我们来看看虚拟列表是什么玩意,并用 React 来实现两种虚拟列表组件. 虚拟列表,其实就是将一个原本需要全部列表项的渲染的长列表,改为只渲染可视区域内的列表项,但滚动效果还是要和渲染所有列表项的长列表一样. 虚拟列表解决的长列表渲染大量节点导致的性能问题: 一次性渲染大量节点,会占用大量 GPU 资源,导致卡顿: 即使渲染好了,大量的节点也持续占用内存.列表项下的节点越多,

  • Vue 虚拟列表的实战示例

    序言 现如今,我们总是在无止境的刷.刷微博.刷抖音.刷沸点......一次次丝滑下拉体验的背后却是前端攻城狮的用心. 本篇讨论基于 Vue.js 的列表无限下拉实践. 我们的目标就是:让列表下拉纵享丝滑,而不是像以往的下拉就 loading 等待的体验. 译自 Better Programming 在线 Demo 设计 咱还是用 Vue CLI 来快速构建项目. 这是主页面: // EndlessList.vue <template> <div class="endless-s

  • React虚拟渲染实现50个或者一百个图表渲染

    目录 前言 需求 方案 实现 VirtualScroll 组件实现 使用 结束语 前言 最近有个需求,一个页面上要渲染50个或者100个图表,把功能实现后,页面太卡了.之前用过虚拟渲染能解决此类的问题,但用的都是别人写好的库,想了想,自己实现也并不复杂,于是决定自己实现一下. 需求 每行渲染3个图表,右上角的切换可以有50个,100个,或者更多. 方案 虚拟列表其实就是对可视区域做渲染.对不可见的内容不渲染或者预渲染一部分,预渲染一部分,可以减少白屏的内容 我们从上面的图可以看到 可视区域就是我

  • 使用 Vue 实现一个虚拟列表的方法

    因为 DOM 性能瓶颈,大型列表存在难以克服的性能问题. 因此,就有了 "局部渲染" 的优化方案,这就是虚拟列表的核心思想. 虚拟列表的实现,需要重点关注的问题一有以下几点: 可视区域的计算方法 可视区域的 DOM 更新方案 事件的处理方案 下面逐一分解说明. 可视区域计算 可视区域的计算,就是使用当前视口的高度.当前滚动条滚过的距离,得到一个可视区域的坐标区间. 算出可视区域的坐标区间之后,在去过滤出落在该区间内的列表项,这个过程,列表项的坐标也是必须能算出的. 思考以下情况, 我们

  • vue实现虚拟列表功能的代码

    当数据量较大(此处设定为10w),而且要用列表的形式展现给用户,如果我们不做处理的话,在浏览器中渲染10w dom节点,是极其耗费时间的,那我的Macbook air举例,10w条数据渲染出来到能看到页面,需要13秒多(实际应该是10秒左右),如果是用户的话肯定是不会等一个网页十几秒的 我们可以用虚拟列表解决这个问题 一步步来 首先看一下效果 这是data中的数据 data() { return { list: [], // 贼大的数组 li: { // 列表项信息 height: 50, },

  • 微信小程序虚拟列表的实现示例

    目录 前言 分析 初始渲染方法 初步优化 进一步优化 方法二 前言 大部分小程序都会有这样的需求,页面有长列表,需要下拉到底时请求后台数据,一直渲染数据,当数据列表长时,会发现明显的卡顿,页面白屏闪顿现象. 分析 请求后台数据,需要不断的setData,不断的合并数据,导致后期数据渲染过大 渲染的DOM 结构多,每次渲染都会进行dom比较,相关的diff算法比较耗时都大 DOM数目多,占用的内存大,造成页面卡顿白屏 初始渲染方法 /* * @Descripttion: * @version: *

  • 浅谈el-table中使用虚拟列表对对表格进行优化

    目录 前言 解决思路 具体实现 需要满足的必备条件 问题 前言 我们会经常使用表格,如果数据量大就直接可以分页,但是不可避免的会出现一些需要一页要展示很多条的情况,或者不用分页. 这个时候如果纯展示还好一点,列表里如果加上可编辑,就会变得卡的不行,点个下拉框,下拉框好久才会弹出来.这样是十分影响用户使用. 解决思路 首先我考虑是不是由于数据加载太慢导致的页面卡顿,于是我采用了滚动加载的方式,首先获取数据后,先加载100条数据.滚动的时候再加载到页面中,这样分批次加载,就会减轻首次加载数据量太大的

  • 微信小程序虚拟列表的应用实例

    目录 前言 什么是虚拟列表? demo效果 准备工作 屏高&盒子高度 优化 总结 前言 股票热门榜单有4000多条,渲染到页面上在盘中时还得实时更新,如果采用接口和分页,当下拉几十页的时候页面会变的越来越卡并且还得实时更新,最后的做法是一开始数据就从ws传递过来,我们只需要传起始下标和结束下标即可,在页面上我们也只生成几个标签.大大减轻了渲染压力. 什么是虚拟列表? 就只指渲染可视区域内的标签,在滚动的时候不断切换起始和结束的下标来更新视图,同时计算偏移. demo效果 准备工作 计算一屏可展示

随机推荐