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 ) ;
}
function rowRenderer ( { key, index, style } ) {
return (
< div key= { key} style= { style} >
{ list[ index] }
< / div>
) ;
}
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元素,极大缓解界面渲染压力