react-virtualized虚拟滚动list

  • ant design的select组件是有虚拟滚动的,这样即使select的数据很多界面也不会卡顿,虚拟列表概念如下
  • 虚拟列表,通过计算滚动视窗,每次只渲染可见屏幕部分节点,超出屏幕的不可见范围用内填充 padding 代替,对于浏览器来说无论你滚动到什么位置,渲染的都是屏幕范围内的节点,这样就不会有性能负担
  • 在项目的开发有这么一个需求,用户希望select框在选中数据之后,再次将鼠标移入select框时候,原本选中的文本不会消失,可以在原本文本上进行修改,项目使用的是antdesign组件,原有的select不支持这样的操作,只能手动撸一个组件,使用antdesign的input以及list组件进行开发
  • 本组件使用的是input框和list组件,采用两个单独组件,当用户触发input的onChange事件后,将list的数据进行过滤显示,在ui层面上与select框是一致的,其中,由于数据不少,且antd的list组件没有支持虚拟滚动,这样数据多了回导致界面卡顿,以是使用react-virtualized进行虚拟列表开发,具体代码如下:
  • 以下仅展示虚拟列表react-virtualized使用代码:
import React from 'react';
import ReactDOM from 'react-dom';
import { InfiniteLoader, List } from 'react-virtualized';
import 'react-virtualized/styles.css'; 

// 数据量
const remoteRowCount = 10000;

// 源数据
const list = [];
for (let i = 0; i < remoteRowCount ; i++) {
  list.push(i);
}

// 加载
function isRowLoaded({ index }) {
  return !!list[index];
}

// 滚动到下一个渲染时候触发函数
function loadMoreRows({ startIndex, stopIndex }) {
  console.log(1);
}

// 这里需要注意,必须将style央视
function rowRenderer({ key, index, style }) {
  return (
    <div key={key} style={style}>
      {list[index]}
    </div>
  );
}

// Render your list
ReactDOM.render(
  <InfiniteLoader
    isRowLoaded={isRowLoaded}
    loadMoreRows={loadMoreRows}
    rowCount={remoteRowCount}
  >
    {({ onRowsRendered, registerChild, height = 200 }) => (
      <List
        height={300}
        onRowsRendered={onRowsRendered}
        rowCount={remoteRowCount}
        rowHeight={30}
        rowRenderer={rowRenderer}
        width={400}
      />
    )}
  </InfiniteLoader>,
  document.getElementById('container')
);

  • 10000数据下,仅渲染20+个dom元素,极大缓解界面渲染压力
    在这里插入图片描述
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值