React 虚拟化长列表
共 1748字，需浏览 4分钟
· 2021-03-04
嗨，我是勾勾。
今天在整一个项目的时候，遇到一个长列表展示的优化问题。当时想的是进行数据分页，但是需要去和后台进行沟通。我的原则是尽量不麻烦别人，因此我搜索了一些方案，最后在 react 官方上获取到了解决方法——虚拟化列表。
虚拟化列表
我们来看下官方介绍。
“虚拟化列表是一项“虚拟滚动”技术。这项技术会在有限的时间内仅渲染有限的内容，并奇迹般地降低重新渲染组件消耗的时间，以及创建 DOM 节点的数量。”
看起来真的可以达到优化长列表的效果，按照流程我们试一试。
在 react 项目中使用虚拟化列表需要使用一项模块叫 react-virtualized。
它的主页地址：https://bvaughn.github.io/react-virtualized/#/components/List。详细内容可以去主页看看。
虚拟化列表实现流程
为了快速实现虚拟化列表，前面的基础配置我就不说了，直接从使用这个虚拟化包开始。
首先，我们安装这个虚拟化包。
npm i react-virtualized这个包对外暴漏了一些组件 api。这里我们使用的就是 List 组件。
这个组件的属性介绍，我们可以看看github地址的介绍 https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md
我们简单看几个 <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。
推荐阅读：
点个“在看”和“赞”吧，
毕竟我是要成为前端网红的人。