React 虚拟化长列表

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

虚拟化列表

我们来看下官方介绍。

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

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

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

详细内容可以去主页看看。

虚拟化列表实现流程

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

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

npm i react-virtualized

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

这个组件的属性介绍，我们可以看看github地址的介绍。

我们简单看几个

• 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。