React 虚拟化长列表

Posted 2021-03-29 勾勾的前端世界

嗨，我是勾勾。

今天在整一个项目的时候，遇到一个长列表展示的优化问题。当时想的是进行数据分页，但是需要去和后台进行沟通。我的原则是尽量不麻烦别人，因此我搜索了一些方案，最后在 react 官方上获取到了解决方法——虚拟化列表。

虚拟化列表

我们来看下官方介绍。

“虚拟化列表是一项“虚拟滚动”技术。这项技术会在有限的时间内仅渲染有限的内容，并奇迹般地降低重新渲染组件消耗的时间，以及创建 DOM 节点的数量。”

看起来真的可以达到优化长列表的效果，按照流程我们试一试。

在 react 项目中使用虚拟化列表需要使用一项模块叫 react-virtualized。

虚拟化列表实现流程

为了快速实现虚拟化列表，前面的基础配置我就不说了，直接从使用这个虚拟化包开始。

首先，我们安装这个虚拟化包。

npm i react-virtualized

这个包对外暴漏了一些组件 api。这里我们使用的就是 List 组件。

我们简单看几个 <List width={} height={} rowHeight={}  rowRenderer={}></List>

• width 这个 List 组件的宽度

• height 这个 List 组件的高度

• rowHeight 每一行的高度

• rowRenderer 每一行渲染都要执行的函数

代码如下：

  
    
    
  
 
   
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
   
import React,{ Component,useState,useEffect,Fragment,Suspense} from "react"import {List} from 'react-virtualized';function getArr() { //模拟数据 let arr = [] for(var i=0;i<1000;i++){ arr.push({name:"zhangsan"+i}) } return arr}let arr = getArr()console.log(arr)function App() { return( <> <List  width={400}  height={200}  rowCount={arr.length}  rowHeight={40} rowRenderer={rowRenderer}/> </> )}function rowRenderer({key,index,style}) { return ( <div key={key} style={style}>{arr[index].name}</div> )}
export default App
 
  

在页面中，我们就能看到下面的形式。

在审查元素中，我们的代码中一直都会有这5个div出现，根据视图显示的内容，不会出现很多的 div。

推荐阅读：

点个“在看”和“赞”吧，

毕竟我是要成为前端网红的人。