原 React如何渲染大数据量的列表？

最新推荐文章于 2024-06-17 09:53:58 发布

飞翔的熊blabla

最新推荐文章于 2024-06-17 09:53:58 发布

阅读量612

点赞数

分类专栏： react

原文链接：https://blog.csdn.net/running987/article/details/81541599

版权

react 专栏收录该内容

115 篇文章 2 订阅

订阅专栏

每个项目产品都要加埋点，加500行埋点是不是会占用你一两天的时间而且很容易犯错,想只用一小时准确加完这500行埋点剩下一天喝茶聊天么？来试试这520工具, 高效加埋点，目前我们公司100号前端都在用，因为很好用，所以很自然普及开来了，推荐给大家吧

http://www.520webtool.com/

自己开发所以免费，埋点越多越能节约时间，点两下埋点就加上了，还不会犯错，里面有使用视频，反正免费 😄

本文参考自: 原文地址

我们经常会遇到这种需求，根据数据展示列表。这种代码估计你已经撸过成百上千次了。

但如果你需要同时展示成千上万条数据呢，必然会造成浏览器卡顿，丢帧，甚至卡死的问题。

本文将介绍利用react-virtualized来高效渲染大数据量列表。

开始吧！
首先创建一个React 应用

create-react-app virtualization
复制代码
应用将展示1000条如下这样的评论：

我们引入第三方库lorem-ipsum来生成模拟数据：

cd virtualization

npm install --save lorem-ipsum
复制代码
在
src/App.js
中引入
lorem-ipsum
：
import loremIpsum from 'lorem-ipsum';
复制代码
接下来创造一个1000条数据的数组：

在
render()
中使用这个数组：

render() {
return (
<div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1 className="App-title">Welcome to React</h1> </header> <div className="list"> {this.list.map(this.renderRow.bind(this))} </div> </div> ); } 复制代码
增加
renderRow()
来创造列：

renderRow(item) {
return (
<div key={item.id} className="row"> <div className="image"> <img src={item.image} alt="" /> </div> <div className="content"> <div>{item.name}</div> <div>{item.text}</div> </div> </div> ); } 复制代码
在
src/App.css
中加点样式：

.list {
padding: 10px;
}

.row {
border-bottom: 1px solid #ebeced;
text-align: left;
margin: 5px 0;
display: flex;
align-items: center;
}

.image {
margin-right: 10px;
}

.content {
padding: 10px;
}
复制代码
好了，启动项目
yarn start
，可以看到如下画面：

查看元素，我们可以看到
DOM
上挂载了非常多的
div
：

我们来测测性能
如果你用的是 Chrome，只需几步，快速测试性能：

打开开发者工具
按Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) 来打开命令菜单
输入
render
，下拉框中选择
Show Rendering
。
点击
render
页签，
FPS Meter
前打钩。
滚动列表
我们可以看到，当滚动条滚动的时候，帧率从60掉到了38左右。这还是只有1000条数据情况，如果再增大数据，浏览器会出现卡顿，甚至卡死。

接着我们来看看react-virtualized是如何提高性能的？

react-virtualized原理
核心原理：只渲染你所见的。

上面的应用渲染了1000条评论，但屏幕只为你展示了10来条数据，那另外990条的渲染就是浪费的。

如果我们只渲染可见的评论，当鼠标滚动查看更多的时候，将新的节点替换旧的节点。这样就完美解决了性能瓶颈的问题。

怎么用呢？
首先在
src/App.js
中，引入
List
组件：

import { List } from "react-virtualized";
复制代码
替换
render()
原有代码：

<div className="list">

{this.list.map(this.renderRow.bind(this))}

</div>
复制代码
使用
List
组件

renderRow({ index, key, style }) {
return (
<div key={key} style={style} className="row"> <div className="image"> <img src={this.list[index].image} alt="" /> </div> <div className="content"> <div>{this.list[index].name}</div> <div>{this.list[index].text}</div> </div> </div> ); } 复制代码
启动应用
yarn start
：

查看元素：

可以看到只渲染了可见的元素。

性能怎么样呢？
用上面相同的方法测试：

可以看到基本维持在60帧左右。性能杠杠的（^_^）

以上只是对react-virtualized的简单应用，感兴趣可以去试试！
---------------------
作者：running987
来源：CSDN
原文：https://blog.csdn.net/running987/article/details/81541599
版权声明：本文为博主原创文章，转载请附上博文链接！