高级套娃之react-virtualized建议收藏

最新推荐文章于 2025-04-11 08:36:19 发布

Dt_man

最新推荐文章于 2025-04-11 08:36:19 发布

阅读量3.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： react react-virtualized 文章标签： reactjs 前端 javascript html

本文链接：https://blog.youkuaiyun.com/Dt_man/article/details/106769446

本文介绍了react-virtualized库，用于高效渲染大型列表和表格数据。通过AutoSizer、WindowScroller和InfiniteLoader等高阶组件，实现动态加载和无限滚动。文章详细讲解了这些组件的使用方法，帮助解决页面中长列表的渲染问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

高级套娃react-virtualized

概述

可以解决页面中长列表的渲染，实现在动态在可视区域加载内容
react-virtualized 是React组件，用来高效渲染大型列表和表格数据
GitHub地址： react-virtualized

基本使用

npm install react-virtualized --save
// 安装该组件

之后在项目中导入便可
- import { } from ‘react-virtualized’

list

GitHub地址：list

基本使用

  <List
    autoHeight
    <!-- 组件的宽度 -->
    width={
     width}
    <!-- 组件的高度 -->
    height={
     height}
    <!-- 每一行的数量 -->
    rowCount={
     count}
    <!-- 每行的高度 -->
    rowHeight={
     120}
    <!-- 渲染每一行的内容 -->
    rowRenderer={
     this.rowRenderer}
  />
    <!-- 渲染每一行的内容 -->
    rowRenderer({
     
      key,         // 每一行的唯一标识
      index,       // 索引号
      style        // 重点属性：一定要给每一个行数添加该样式
      isScrolling, // 当前列表是否在滚动中
      isVisible,   //这一行是否在列表中可见
      }) {
     
        return (
          <div key={
     key} style={
     style}>
            {
     list[index]}
          </div>
        );
    }