web前端全系列 教程
1839个小节阅读:2244.3k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
虚拟列表是按需显示的一种技术,不必渲染所有列表项,而只是渲染可视区域内的一部分列表元素的技术。
可以使用react-virtualized
虚拟滚动库。
xxxxxxxxxx
npm install react-virtualized
xxxxxxxxxx
import React, { Component } from 'react';
import {List ,AutoSizer} from 'react-virtualized'
export default class LargeDom extends Component {
constructor(){
super()
this.state={list:[]}
}
componentDidMount(){
this.setState({list:new Array(40000).fill(0)})
}
render() {
return (
<div style={{height:'600px',border:'1px solid red'}}>
<AutoSizer>
{({width,height})=>{
return <List
width={width}
height={height}
rowCount={this.state.list.length}
rowHeight={50}
rowRenderer={({key,index,style})=><li key={key} style={style}>
这是第{index+1}条数据
</li>}
/>
}}
</AutoSizer>
</div>
);
}
}