介绍:
用于呈现大量的列表和表格数据,可在给定的时间内渲染有限的内容,既降低重新渲染组件所消耗的时间,也能减少DOM节点的数量
安装:
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.表格