利用react-window 构造虚拟列表

当数据量庞大且要生成足够多的 ul 的时候，直接渲染会导致浏览器卡死，可以使用react-window 或 react-virtualized 来虚拟加载列表

由react-virtualized文档可知 react-window更轻量级 :

查看使用例子: react-window/examples.

部分代码：

import {FixedSizeList as List} from 'react-window';
import  AutoSizer from 'react-virtualized-auto-sizer'

//定义生成函数
function cellRenderer({index, key, style}) {
    return (
        <li key={key} style={style}>
            Example: {index}
        </li>
    )
}


//虚拟化加载
<AutoSizer>
    {
        ({height,width})=>(
            <List
                className='List'
                height={height}
                width={width}
                itemCount={list.length}
                itemSize={30}
            >
                {cellRenderer}
            </List>
        )
    }
</AutoSizer>