React Virtualized CellMeasurer with List间歇性地提供随机高度
React Virtualized是一个用于构建高性能虚拟化列表和表格的React组件库。它通过只渲染可见区域内的元素，而不是整个列表或表格，来提高性能和内存效率。
CellMeasurer是React Virtualized中的一个组件，用于测量列表或表格中每个单元格的尺寸。它可以根据内容的大小动态调整单元格的高度，以确保列表或表格的正确显示。
React Virtualized的优势包括：
- 高性能：通过只渲染可见区域内的元素，减少了渲染和布局的开销，提高了列表或表格的性能。
- 虚拟化：通过虚拟化技术，可以处理大量数据而不会影响性能和用户体验。
- 灵活性：React Virtualized提供了丰富的配置选项和可定制的组件，可以满足各种需求。
- 支持多种布局：可以创建各种布局，包括列表、表格、网格等。
React Virtualized的应用场景包括但不限于：
- 数据展示：适用于需要展示大量数据的场景，如社交媒体的消息列表、电子商务的商品列表等。
- 数据管理：适用于需要对大量数据进行增删改查操作的场景，如后台管理系统的数据表格。
- 日程安排：适用于需要展示日历或时间表的场景，如会议日程安排、课程表等。
腾讯云提供了一些与React Virtualized类似的产品和服务，可以帮助开发者构建高性能的虚拟化列表和表格。其中，推荐的产品是腾讯云的云服务器（CVM）和云数据库MySQL。
- 云服务器（CVM）：腾讯云的云服务器提供了高性能的计算资源，可以用于部署React Virtualized应用程序。详情请参考腾讯云云服务器。
- 云数据库MySQL：腾讯云的云数据库MySQL提供了可靠的、高性能的数据库服务，可以存储React Virtualized应用程序所需的数据。详情请参考腾讯云云数据库MySQL。
以上是关于React Virtualized和相关腾讯云产品的介绍和推荐。希望对您有帮助！
相关·内容
我正面临着react-virtualized的一个问题，当我尝试渲染List和CellMeasurer时，当我滚动列表时，高度会间歇性地被错误地计算(有时它们被正确测量，有时它被错误测量)。有时，很少有项目会达到列表中第一个项目的高度。当第一项的高度大于另一项的高度时，我看到元素之间有额外的空格，而当高度较小时，它们开始相互重叠。 添加一些我正在尝试实现的最小化示例代码。[index];
浏览 95提问于2021-03-24得票数 0
我正在尝试使用react虚拟化来虚拟化一个列表，其中一些行具有不同的高度，并且列表占据了父目录中的所有空间。我正试图用CellMeasurer、AutoSizer和List组件来实现这一点。我的包版本如下：react-dom: "16.8.6"import React, { Pure
浏览 1提问于2019-08-16得票数 5
回答已采纳
1回答
React列表项目的虚拟位置
、、、、
我在类似下面的代码片段中使用React Virtualized。有几个项目是使用CellMeasurer呈现的。最后一项表示将加载更多项，并且不会正常呈现。此项目具有错误的位置/样式和与其关联的错误高度。我该如何解决这个问题呢？如果你想使用它，这里有一个Plunkr：var List = ReactVirtualized.List;
var CellMeasurer = ReactVirtualized.CellMeasurersrc=
浏览 0提问于2017-02-23得票数 0
回答已采纳
, { Component } from 'react'; import { List } from 'react-virtualizedfrom 'react-virtualized'; cl
浏览 2提问于2017-10-06得票数 1
但是，我仍然无法理解如何在react-virtualized列表中动态设置行高。如何计算rowHeight道具函数中的高度？, List } from 'react-virtualized';);
动态高度现
浏览 4提问于2016-12-30得票数 10
1回答
我有一个react-virtualized列表，rows中的每个item都有一个expand button，当单击按钮时，行的高度发生变化，并展开并显示更多信息。这里的问题是，在单击按钮后，内部Grid (ReactVirtualized__Grid__innerScrollContainer) CSS高度属性没有更新，或者Gid没有重新呈现/通知行高的更改。在每次更新行项高度时，我应该做些什么来使行重行？/styles/Home.module.css";
impo
浏览 20提问于2022-09-30得票数 0
回答已采纳
1回答
我正在使用react-virtualized v-9.21.2来显示列表，我在插入新项时遇到了问题，在向列表插入新项时，我正在清除缓存并更新listkey以自动调整高度，否则，新添加的项将被裁剪，但当this.listKey += 1
return ( &
浏览 30提问于2020-07-21得票数 3
我有一个react组件，它以网格模式显示项目的一维列表。每一项都具有相同的宽度和高度，并且它们位于三列内。可能有很多这样的东西，所以我决定使用Masonry组件来尝试react-virtualized，它似乎就是为这个用例编写的。它工作得很好，但有一点需要注意:如果物品改变了高度，我就不能让砖石注意到。cellRenderer({ index, key, parent, style }) { <CellMeasurer
浏览 5提问于2017-06-13得票数 4
回答已采纳
我使用的是可扩展面板(Material)，在列中有一个反应虚拟化列表，并且一直存在高度自动调整的问题。下面是父组件：import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import List from 'react-v
浏览 2提问于2018-06-05得票数 4
布局似乎提供了我们想要的东西，但我“无法让它工作”。import * as React from 'react';import { RouteComponentProps} from 'react-router-dom';
import { Au
浏览 2提问于2017-09-22得票数 2
回答已采纳
1回答
我正在使用React Virtualized来窗口我的项目列表，它具有以下功能1)任何项目上的onClicking，用户将得到一个详细信息面板提示，在那里他将能够更新项目的详细信息。CellMeasurer满足了我的需求，因为它支持动态高度。但我对它有以下问题我确信我的实现在某些地方是不正确的，但我花了很多时间来敲打我的头。>
浏览 11提问于2020-03-17得票数 1
3回答
我正在寻找用React实现无限滚动的方法。我遇到过，发现它的效率很低，因为它只是向DOM添加节点，而不是删除它们。有没有经过验证的React解决方案，可以在DOM中添加、删除和维护固定数量的节点。我们已经开始使用React，因为它的优化算法。现在我找不到解决这个问题的办法。我遇到了。但它是用Jquery实现的。要使用这个airbnb无限滚动，我必须松开我不想做的React优化。我的目标是一次只加载50个项目)
var Hello = <em
浏览 0提问于2014-01-21得票数 95
回答已采纳
我试图使用react虚拟化的List组件来显示具有复杂标记的大型文本文档。文档被分成几块不同长度的文本，这些文本的长度小于某个最大值。List组件将这些块中的每一个作为一行呈现。由于块长度不同，所以不能使用固定行高，所以我想使用CellMeasurer。问题是，在每个块上生成标记所需的解析代价很高--这是我希望使用react的部分原因--虚拟化。由于标记不影响高度，所以我想使用一个更简单的rowRenderer函数，它只在测量行时呈现没有标记的文本，然后为每个带标记的块的实际呈现
浏览 5提问于2020-08-04得票数 0
回答已采纳
我使用react虚拟化来构建一个无限加载网格，它还使用AutoSizer处理动态网格宽度，使用WindowScroller启用带有视图端口的滚动。我收集了一个最小的柱塞演示，它将呈现一个3列网格的随机"lorem“文本片段。这个示例内容没有终点，它只加载与滚动一样多的内容。柱塞演示： import { render } from 'react-dom';
import {
浏览 4提问于2017-08-15得票数 2
3回答
当我们使用材料用户界面时，我需要使用材料ui反应组件
因此，一般来说，我可以使Autosizer，CellMeasurer和列表组
浏览 15提问于2021-04-19得票数 15
当你在列表中以好的方式切换标题时，就会发生错误的行为.在cacheExtent的firstIndex之上的一些项目将不会被重建，因此滚动偏移量将被关闭那么多标题高度。import 'package:flutter/material.dart';
runApp(MyApp( ));
}
浏览 9提问于2021-05-29得票数 0
3回答
这些物品高度不一。
这些项目可能包含图像，我们允许用户跳转到特定的日期。这是很棘手的，因为用户可以跳转到列表中的某个点，在这个列表中，我们需要将图像加载到视点之上，这将在内容加载时向下推下去。
浏览 6提问于2014-01-01得票数 117
回答已采纳
6回答
T:class int k = ra.Length; return ra[r];不幸的是，它不适用于任何东西的List以下是适用于任何List<>的相同扩展{ int r = Random.Range(0,k);
return lis
浏览 8提问于2015-11-26得票数 23
回答已采纳
12回答
但是，facebook登录按钮必须包装在标签中：目前，我已经将来自的所有代码粘贴到了我的index.html中，这是我的项目中唯一的html文件，其中包含了React但是，我需要将包含实际登录按钮的最后一个部分放入我的React组件中。
浏览 7提问于2014-12-31得票数 46
回答已采纳
38回答
从美学和性能的角度来看，根据条件将一个项目列表拆分成多个列表的最佳方式是什么？等同于：bad = [x for x in mylist if x not in goodvals]更新:这里是实际的用例，为了更好地解释我正在尝试做的事情：I
浏览 0提问于2009-06-04得票数 327
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
