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元素，极大缓解界面渲染压力