React 虛擬化長列表
嗨，我是勾勾。
今天在整一個項目的時候，遇到一個長列表展示的優(yōu)化問題。當時想的是進行數(shù)據(jù)分頁，但是需要去和后臺進行溝通。我的原則是盡量不麻煩別人，因此我搜索了一些方案，最后在 react 官方上獲取到了解決方法——虛擬化列表。
虛擬化列表
我們來看下官方介紹。
“虛擬化列表是一項“虛擬滾動”技術。這項技術會在有限的時間內(nèi)僅渲染有限的內(nèi)容，并奇跡般地降低重新渲染組件消耗的時間，以及創(chuàng)建 DOM 節(jié)點的數(shù)量。”
看起來真的可以達到優(yōu)化長列表的效果，按照流程我們試一試。
在 react 項目中使用虛擬化列表需要使用一項模塊叫 react-virtualized。
它的主頁地址：https://bvaughn.github.io/react-virtualized/#/components/List。詳細內(nèi)容可以去主頁看看。
虛擬化列表實現(xiàn)流程
為了快速實現(xiàn)虛擬化列表，前面的基礎配置我就不說了，直接從使用這個虛擬化包開始。
首先，我們安裝這個虛擬化包。
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 每一行渲染都要執(zhí)行的函數(shù)
代碼如下：
import React,{ Component,useState,useEffect,Fragment,Suspense} from "react"import {List} from 'react-virtualized';function getArr() { //模擬數(shù)據(jù) 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出現(xiàn)，根據(jù)視圖顯示的內(nèi)容，不會出現(xiàn)很多的 div。
推薦閱讀：
點個“在看”和“贊”吧，
畢竟我是要成為前端網(wǎng)紅的人。