前端性能优化（三）react 固定及非固定高度虚拟滚动

最新推荐文章于 2024-10-04 00:46:18 发布

前端学习专用

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量253

点赞数 1

文章标签：前端 react.js javascript

本文链接：https://blog.csdn.net/weixin_44386315/article/details/142032577

版权

固定高度虚拟列表

import {FixedSizeList} from 'react-window'
// import FixedSizeList from './FixedSizeList'
import './Fixed.css'

// 渲染的每一行的 item 项
function Row({index, style}) {
  return <div className={index % 2 ? 'odd': 'even'} style={style}>
    Row {index}
  </div>
}

function App() {
  // 可视区的宽高 200，每一项高度 50，列表总数 1000
  
  return <FixedSizeList className='list' height={200} width={200} itemSize={50} itemCount={1000}>
    {Row}
  </FixedSizeList>
}
export default App

不定高度虚拟列表


import { VariableSizeList } from "react-window";
// import  VariableSizeList  from "./VariableSizeList.js";
import "./Fixed.css";

// 这里给出每个元素的高度计算方式，可以根据自己的业务需求按条件计算，这里简单给出随机获取
const rowSizes = new Array(1000).fill(true).map(() => 25 + Math.round(Math.random() * 55))
const getItemSize = index => rowSizes[index]

function Row({ index, style }) {
  return (
    <div className={index % 2 ? "odd" : "even"} style={style}>
      Row {index}
    </div>
  );
}

function App() {
  return (
    <VariableSizeList
      className="list"
      height={200}
      width={200}
      itemSize={getItemSize}
      itemCount={1000}
    >
      {Row}
    </VariableSizeList>
  );
}
export default App;

css样式

.list {
    border: 1px solid gray;
  }
  .odd, .even {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .odd {
    background-color: pink;
  }
  
  .even {
    background-color: antiquewhite;
  }