前端如何渲染数据（Web应用开发中海量数据渲染的最佳姿势）-爱玩数码

前端如何渲染数据（Web应用开发中海量数据渲染的最佳姿势）

爱玩数码编辑 • 2023年11月22日 16:33:50 • 投稿 • 阅读 21

介绍

在当下Web开发盛行的时代里，Web应用随之面临着各种问题，虽然前端框架或者前端解决方案百花齐放，但是并不是所有的问题都能很完美的解决。由于Web应用是基于浏览器渲染界面的，而由于浏览器瓶颈的限制，当大量数据需要渲染到DOM中时，常常会很卡顿，传统的做法大多数是向用户展示一个loading遮罩层，或者是类似于分页形式的加载，但显然有些时候并不能解决所有问题，长时间loading的战展示或许还会给用户带来不优雅的体验，结合以上问题，就出现了一些更加优雅的解决方案，虚拟化加载！

我对虚拟化的理解

笔者认为虚拟化并不是一种新技术，它只是一种为了解决大数据量渲染的一种办法，我们知道浏览器本身能展示给用户的界面就那么大，成千上万的数据量渲染出来的页面他并不能完全看到，因此就出现一种在用户可见范围内渲染页面的技术，只有当用户需要看到它的时候才会去渲染，也就是说原本渲染是一次性的，现在是分步进行的，很好的解决了界面渲染卡顿的问题！下面会介绍两个解决此类问题的react组件框架

react virtualized

react virtualized是一个开源的React虚拟化组件，你可以到Github上获取它，它能够高效的呈现大型列表和表格数据，在Github上star数已达16k+，显然是得到很多人认可的一种react虚拟加载解决方案，而且并没有停止维护：

react-window

react-window可以说是一个完全重写的React虚拟化，对比react virtualized，它是一个更加轻量级的解决方案，没有太多非必要的功能，与react virtualized出自同源，作者本身是建议使用react-window的，因为添加了react virtualized的项目构建后会给项目增加35kb大小，而react-windows只会增加不到2kb，因此说react-window是轻量的，而且更适合初学者！同样作者也在Github上开源了！

效果体验

咱们通过动图的方式简单的来体验下react virtualized和react-window，具体效果尚且不如自己去官网体验！

react virtualized：

分散或非线性数据渲染：

数据网格（Grid）

相对来说UI要规则一些

数据列表

砌体布局

使用windows的滚动条

数据表格

建议直接去demo查看生成的代码

react-window:

import React from ‘react’; import ReactDOM from ‘react-dom’; import { FixedSizeList as List } from ‘react-window’; import ‘./styles.css’; const Row = ({ index, style }) => ( <div className={index % 2 ? ‘ListItemOdd’ : ‘ListItemEven’} style={style}> Row {index} </div> ); const Example = () => ( <List className=”List” height={150} itemCount={1000} itemSize={35} width={300} > {Row} </List> ); ReactDOM.render(<Example />, document.getElementById(‘root’));