针对大数据量的渲染优化库：react-virtual(List)的基本使用

react-virtual库的安装及引用

安装

github地址：https://github.com/bvaughn/react-virtualized

使用命令：

npm install react-virtualized --save

安装过程可能会出现(react版本库以及react-virtualized库之间的存在版本冲突问题)

npm ERR! peer react@"^15.3.0 || ^16.0.0-alpha" from react-virtualized@9.22.3

则使用：

npm install react-virtualized --legacy-peer-deps

使用

// react-virtualized长列表优化
import 'react-virtualized/styles.css';
// List可用于渲染列表内需要重复渲染的节点，
import List from 'react-virtualized/dist/commonjs/List';
// AutoSizer库可以以用于自动获取子List所在父级的宽高，以回调参数的方式传递给List
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';export default class index extends Component {constructor(props: any) {super(props);this.state = {// 生成长度为1000的随机数组list: new Array(1000).fill(Math.rendom(0, 1)* 100.toFixed(0))}this.rowRenderer = this.rowRenderer.bind(this);}// rowRenderer返回需要重复进行渲染的节点rowRenderer(arg: { key: Key, index: number, isScrolling: unknown, isVisible: any, style: any }) { // 此处为ts写法，js可直接使用对象解构，在函数内使用return (<div key={arg.key} style={arg.style}> // stlye一定要用上{arg.index}{this.state.list[index]}</div>)}render() {return (<AutoSizer>{({ width, height }) => ( // 此处width，height为AutoSizer自动获取的父级高度，List可采用也可自定义给定List的高度<Listwidth={width} // 定义列表宽度height={30 * this.props.datalist.length}  // 定义列表总高度rowHeight={30}   // 定义每个item的高度rowCount={this.props.datalist.length} // 需要渲染的列表条数，同时也相当于规定了会渲染的数据条数rowRenderer={this.rowRenderer} // 需要重复渲染的节点/>)}</AutoSizer>)}
}

其他用法及细节参考：使用文档

针对大数据量的渲染优化库：react-virtual的基本使用相关推荐

任何抛开业务谈大数据量的sql优化都是瞎扯
周三去某在线旅游公司面试.被问到了一个关于数据量大的优化问题.问题是:一个主外键关联表,主表有一百万数据,外键关联表有一千万的数据,要求做一个连接. 本人接触过单表数据量最大的就是将近两亿行历史数据( ...
大数据量表的优化查询
1:索引,我们最先想到的就是创建索引,创建索引可以成倍的提升查询的效率,节省时间.但是如果数据量太过于巨大的时候,这个时候单纯的创建索引是无济于事的,我们知道假如特别是在大数据量中统计查询,就拿100 ...
Android, BaseAdapter 处理大数据量时的优化
Android优化最常见的就是ListView, Gallery, GridView, ViewPager 的大数据优化图片优化访问网络的优化优化的原则: 数据延迟加载分批加载本地 ...
一个大数据量表访问优化--联动下拉框查询优化
问题描述有一数据表(产品标签表,每个产品一个唯一的SN,每月100万左右),查询界面上有2个联动下拉框,[规格]____,[批次]______ 用户选择一个规格后(目前200来个规格),列出该规格下达 ...
vue渲染大量数据如何优化_大数据量场景下的Vue性能优化
性能优化最常见的落脚点是在网络和dom上,但是在大数据量的场景下,由于Vue本身的特性,可能会造成js运行层面的性能问题,这篇文章讨论的就是针对这一部分的性能优化方案. 模拟一个大数据量的场景 // ...
web 折线图大数据量拉取展示方案_【第2010期】QQ音乐Android客户端Web页面通用性能优化实践...
前言今日早读文章由QQ音乐客户端开发工程师@关岳分享,公号:云加社区(ID:QcloudCommunity,腾讯云官方开发者社区)授权分享. 正文从这开始~~ QQ音乐 Android 客户端的 W ...
大数据量数据库优化(转)
一.数据库结构的设计如果不能设计一个合理的数据库模型,不仅会增加客户端和服务器段程序的编程和维护的难度,而且将会影响系统实际运行的性能.所以,在一个系统开始实施之前,完备的数据库模型的设计是必须的. ...
大数据量时Mysql的优化要点[转]
转自:http://www.open-open.com/lib/view/open1430901016179.html 如今随着互联网的发展,数据的量级也是撑指数的增长,从GB到TB到PB.对数据的各 ...
大数据量高并发访问的数据库优化方法
一.数据库结构的设计如果不能设计一个合理的数据库模型,不仅会增加客户端和服务器段程序的编程和维护的难度,而且将会影响系统实际运行的性能.所以,在一个系统开始实施之前,完备的数据库模型的设计是必须的. ...

针对大数据量的渲染优化库：react-virtual的基本使用

针对大数据量的渲染优化库：react-virtual的基本使用

针对大数据量的渲染优化库：react-virtual(List)的基本使用

react-virtual库的安装及引用

安装

使用

针对大数据量的渲染优化库：react-virtual的基本使用相关推荐

最新文章

热门文章