虚拟滚动库react-window (react实现)

介绍：

用于呈现大量的列表和表格数据，可在给定的时间内渲染有限的内容，既降低重新渲染组件所消耗的时间，也能减少DOM节点的数量

react-window的api

安装：

npm i react-window

运用：

1.列表

重点：必须有 style={index.style}

如果没有这句会造成：

•  滚动加载出空白列表
• 会出现不停渲染

 代码如下：

import { FixedSizeList, areEqual } from 'react-window';

.......
 renderdata = (index, isScrolling) => {
        console.log(index) 
//{data: Array(80), index: 0, isScrolling: undefined, style: {…}}

        console.log(index.style)
//{position: 'absolute', left: 0, right: undefined, top: 0, height: 200, …}
      

   var item = index.data[index.index]
        return (

            <div   style={index.style} >
               {item.CORDER_NO}
            </div>
        )
    }


    render() {
      
        return (
            <div>
 
               //虚拟化加载
                            <FixedSizeList
                               className={styles.List}
                                height={1000}
                                width={"100%"}
                                itemCount={data.length} //显示条数
                                itemSize={200}//单行高度
                                itemData={data}
                            >
                                {this.renderdata}
                            </FixedSizeList>

                          
            </div>


        )
    }
}

2.表格