首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用CellMeasurer的React虚拟化表没有正确计算高度

问题描述: 在使用CellMeasurer的React虚拟化表时,发现表格没有正确计算行高。

解决方案:

  1. 确保正确引入相关依赖:
    • react-virtualized:React虚拟化库,提供了CellMeasurer组件。
    • react-virtualized-auto-sizer:用于自动调整React虚拟化组件大小的辅助库。
  • 确保正确使用CellMeasurer组件:
    • 在表格的每个单元格中使用CellMeasurer组件包裹内容。
    • 设置CellMeasurer的width和height属性,以便正确测量单元格的大小。
  • 确保正确使用Table组件:
    • 使用AutoSizer组件包裹Table组件,以便自动调整表格大小。
    • 设置Table组件的rowHeight属性为一个函数,该函数返回单元格的高度。
  • 确保正确计算行高:
    • 在rowHeight函数中,使用CellMeasurerCache对象来缓存已测量的行高。
    • 在rowHeight函数中,使用CellMeasurerCache对象的measure方法来测量单元格的高度。

示例代码:

代码语言:txt
复制
import React from 'react';
import { Table, Column, CellMeasurer, CellMeasurerCache } from 'react-virtualized';
import { AutoSizer } from 'react-virtualized-auto-sizer';

const cache = new CellMeasurerCache({
  defaultHeight: 50,
  fixedWidth: true,
});

const data = [
  { id: 1, name: 'John Doe', age: 25 },
  { id: 2, name: 'Jane Smith', age: 30 },
  // ...
];

const ExampleTable = () => {
  const rowHeight = ({ index }) => {
    cache.clear(index, 0);
    cache.rowHeight({ index });
    return cache.getHeight(index, 0);
  };

  const renderCell = ({ columnIndex, key, parent, rowIndex, style }) => {
    const item = data[rowIndex];
    let content;

    switch (columnIndex) {
      case 0:
        content = item.id;
        break;
      case 1:
        content = item.name;
        break;
      case 2:
        content = item.age;
        break;
      default:
        content = '';
    }

    return (
      <CellMeasurer
        cache={cache}
        columnIndex={columnIndex}
        key={key}
        parent={parent}
        rowIndex={rowIndex}
      >
        <div style={style}>{content}</div>
      </CellMeasurer>
    );
  };

  return (
    <AutoSizer>
      {({ height, width }) => (
        <Table
          width={width}
          height={height}
          rowCount={data.length}
          rowHeight={rowHeight}
          rowGetter={({ index }) => data[index]}
          rowRenderer={renderCell}
          headerHeight={50}
        >
          <Column label="ID" dataKey="id" width={100} />
          <Column label="Name" dataKey="name" width={200} />
          <Column label="Age" dataKey="age" width={100} />
        </Table>
      )}
    </AutoSizer>
  );
};

export default ExampleTable;

推荐的腾讯云相关产品:

  • 云服务器(CVM):提供弹性计算能力,满足各种业务需求。产品介绍
  • 云数据库MySQL版(CDB):提供高性能、可扩展的MySQL数据库服务。产品介绍
  • 云存储(COS):提供安全、稳定、低成本的对象存储服务。产品介绍
  • 人工智能机器学习平台(AI Lab):提供丰富的人工智能开发工具和服务。产品介绍
  • 物联网开发平台(IoT Explorer):提供全面的物联网设备接入和管理能力。产品介绍
  • 腾讯云区块链服务(Tencent Blockchain):提供高性能、可扩展的区块链解决方案。产品介绍
  • 腾讯云元宇宙(Tencent Metaverse):提供全面的元宇宙解决方案,支持虚拟现实、增强现实等应用。产品介绍

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

计算使用虚拟面临安全问题

虚拟通常用于所有这些云计算模式和部署中,因为它提供了很多好处,包括成本效益、增加正常运行时间、改善灾难恢复和应用程序隔离等。...在云计算使用虚拟面临安全问题 尽管虚拟带来了很多好处,它同样也带来了很多安全问题: · 虚拟机管理程序:在相同物理机器运行多个虚拟程序。...当新虚拟机获得更多资源,它可以使用取证调查技术来获取整个物理内存以及数据存储镜像。该而镜像随后可用于分析,并获取从前一台虚拟机遗留下重要信息。...虚拟机通过网络被发送到另一台虚拟服务器,并在其中设置一个相同虚拟机。但是,如果这个过程没有得到管理,虚拟机可能被发送到未加密通道,这可能被执行中间人攻击攻击者嗅探到。...结论 针对虚拟计算环境有各种各样攻击,但如果在部署和管理云模式时,企业部署了适当安全控制和程序,这些攻击都可以得以缓解。

2.6K50

长列表优化:用 React 实现虚拟列表

这次我们来看看虚拟列表是什么玩意,并用 React 来实现两种虚拟列表组件。...我们会将计算出来高度做成 style 对象以及一个索引值 index传入到这个组件里进行实例。所以记得在列表项组件内接收它们并使用上它们,尤其是 style。...结尾 虚拟列表实现,核心在于根据滚动位置计算落在可视区域列表项范围。 对于高度固定情况,实现会比较简单,因为我们有绝对正确数据。...对于高度动态情况,就复杂得多,要在列表项渲染后才能得到高度,为此需要设置一个预估高度,并在列表项渲染之后更新高度。 本文中虚拟列表组件 API 参考了 react-window 库。...如果你需要在生产环境使用虚拟列表,推荐使用 react-window,它功能会更强大。

3.6K10

如何处理 React onScroll 事件?

优化滚动事件处理当处理大量滚动事件时,为了提高性能和避免不必要计算,我们可以使用一些优化技巧。...通过使用节流或防抖,我们可以控制滚动事件处理函数触发频率,避免过多计算和渲染。虚拟技术当滚动区域包含大量元素时,为了避免性能问题,我们可以使用虚拟技术来优化滚动事件处理。...虚拟技术只渲染可见区域内元素,而不是全部渲染。这样可以减少 DOM 操作和计算量,提高滚动流畅性和响应速度。...在 React 中,有一些流行虚拟库,如 react-virtualized 和 react-window,可以帮助我们实现滚动区域虚拟。...我们学习了如何添加滚动事件监听器、使用节流和防抖来控制事件处理函数触发频率,以及使用虚拟技术来优化滚动区域性能。

3.2K10

性能:React 实战优化技巧

使用 memo 将组件包装起来,以获得该组件一个 记忆 版本。通常情况下,只要该组件 props 没有改变,这个记忆版本就不会在其父组件重新渲染时重新渲染。...当使用 memo 时,只要任何一个 prop 与先前值不等的话,组件就会重新渲染。这意味着 React使用 Object.is 比较组件中每个 prop 与其先前值。...useMemo const cachedValue = useMemo(calculateValue, dependencies) 在每次重新渲染时候能够缓存计算结果。...如果依赖项没有发生改变,它将返回上次缓存值;否则将再次调用 calculateValue,并返回最新结果。...为了正确使用key属性,确保所提供key是稳定、唯一且可预测虚拟 最常见虚拟列表。仅渲染可见部分,而不是全部内容,实现性能提升。

6200

初探富文本之基于虚拟滚动大型文档性能优化方案

此外虚拟滚动还有更快首屏渲染时间,特别是大文档全量渲染很容易导致首屏渲染时间过长,还能够减少React维护组件状态所带来Js性能消耗,特别是在存在Context情况下,不特别关注就可能会存在性能劣问题...实际上无论是哪种方式,对于本文要讲核心内容差距并没有那么大,只要我们能够保证富文本引擎本身控制选区模块、高度计算模块、生命周期模块等正确调度,以及能够控制实际渲染行为,无论是哪种编辑器引擎都是可以应用虚拟滚动方案...记得之前提到我们是直接使用占位块方式来撑起滚动区域,那么此时我们就需要根据首尾游标来计算具体占位,具体游标值我们后边再计算,现在我们先分别计算两个占位节点高度值,并且将其渲染到占位位置。...那么显而易见一个优化方向是我们可以实现高度缓存,简单来说就是对于已经计算高度我们可以缓存下来,这样在下次计算时就可以直接使用缓存高度,而不需要再次遍历计算,而出现高度变化需要更新时,我们可以从当前节点到最新缓存节点之间...此外这里需要注意是,由于我们是实际取得了高度进行计算,而使用margin可能会导致一系列计算问题例如margin合并问题,所以在这里我们原则是在表达块时能用padding就用padding,尽量避免使用

16910

虚拟列表与 Scroll Restoration

这是因为虚拟列表需要计算得出整个容器高度,在计算之前容器没有高度,浏览器就不能回到之前滚动高度了,因为高度不存在。...react-virtuoso 一种方式是,记录之前虚拟列表容器高度,在回退回来之后先用之前记录值去撑开整个容器高度,待虚拟列表加载后去除。...这样有个问题是虚拟列表无法知道当前位置原来是什么内容,因为虚拟列表都是按照单个 Node 高度计算,整体高度是一个预估值,不能知道当前位置具体是什么。...对于 react-virtuoso 这个库,没有直接暴露给我们每个 Node 计算高度,也没有一个自身 State 想要缓存状态不太现实。...之后,我又找到一个比较小众库, virtual-scroller ,不仅仅可以在 React 使用,他独立封装了一个 Core,可以单独在各个框架中使用,即使在 VanillaJS 中使用,小众库功能肯定不会很多

84720

mini react-window(一) 实现固定高度虚拟滚动

,实现赖加载,但是如果内容越来越多会引起大量重排和重绘虚拟列表,可视区域有限,看到数据有限,在用户滚动时,指渲染可是区域内内容即可,dom 少,渲染少在 github 上也有很多针对 react 虚拟滚动库...,我们这里对 react-window 使用和实现,进行一下简单学习分享,了解不同虚拟滚动场景下使用方式和 react 优秀封装,希望对你有帮助。...固定高度场景这种场景中我们已知每一项渲染高度,可以根据渲染个数计算出整体高度,我们只需要对可是区域内渲染进行渲染计算即可。...实现 FixedSizeList 组件时我们要注意我们没有直接写, react-window 提供了固定高度非固定高等几种虚拟滚动场景,但是对于包裹元素来说基本都是一致,只是具体场景元素处理有不同...,所以可知内容高度可以直接计算,但是其他非固定高度场景不能够复用,所以这里我们使用传入方式;同时每一项样式高度和 top 值也是需要具体场景单独计算

1.8K50

2021前端面试题及答案_前端开发面试题2021

、box-sizing:box- content分别是怎么计算?...2)、跨浏览器兼容:虚拟 DOM 帮助我们解决了跨浏览器问题,它为我们提供了标准 API,甚至在 IE8 中都是没问题。...:获取每个实例初始状态 componentWillMount:组件即将被装载、渲染到页面上 render:组件在这里生成虚拟 DOM 节点 componentDidMount:组件真正在被装载之后...15除了在构造函数中绑定 this,还有其它方式吗 你可以使用属性初始值设定项(property initializers)来正确绑定回调,create-react-app 也是默认支持。...答:React遵循协议是“BSD许可证 + 专利开源协议”,这个协议比较奇葩,如果你产品跟facebook没有竞争关系,你可以自由使用react,但是如果有竞争关系,你react使用许可将会被取消

1.3K30

虚拟滚动 3 种实现方式!

前言 工作中一直有接触大量数据渲染业务,使用react-window多之又多,所以对虚拟列表有了些浅显理解。今天,我们就照着react-window使用方式来实现三种虚拟列表。...元素固定高度虚拟列表 元素不定高度虚拟列表 元素动态高度虚拟列表 虚拟列表核心原理 我们先来看一下整个虚拟列表元素表现。...虚拟列表实现 一、元素固定高度虚拟列表 使用 const Row = ({ index, style, forwardRef }) => { return ( <div className...难点一解决方案 可以通过遍历所有的Row计算出总高度,但我认为计算出精确总高度必要性不大,同时也为了兼容第三种虚拟列表,我们不去计算精确高度。...元素动态高度虚拟列表 最后这一种虚拟列表其实就是基于第二种来实现,只不过增加监听元素高度变化事件,在某个元素发生变化时候重新计算各种数据。

1.4K10

2020年,你需要掌握10大趋势技术

) Angular和React DevOps 物联网(IoT) 智能应用程序(I –Apps) 大数据(Big Data) RPA(机器人流程自动) 10)RPA(机器人过程自动) 通常,任何行业中任何桌面工作都涉及本质上是重复并且可以自动任务...使用React和Angular可以创建一个高度模块Web应用程序。因此,您无需为添加新功能而在代码库中进行大量更改。...Angular和React还允许您使用相同JS,CSS和HTML知识创建原生移动应用程序。 最好是–具有高度活跃社区开源库。...3)增强现实(AR)和虚拟现实(VR) 虚拟是真实!现在,各种规模企业都在使用VR和AR这两种技术,它们使您可以在虚拟环境中体验非常接近真实事物。但是底层技术可能非常复杂。...医学生可以使用AR技术在这种环境中进行手术。 另一方面,虚拟现实也为游戏和互动营销开辟了新途径。

50320

react进阶」年终送给react开发者八条优化建议

key 无论是react 和 vue,正确使用key,目的就是在一次循环中,找到与新节点对应老节点,复用节点,节省开销。...我们demo使用列表做,实际对于列表来说,最佳方案是虚拟列表,而时间分片,更适合热力图,地图点位比较多情况。...正常虚拟列表分为 渲染区,缓冲区 ,虚拟列表区。 如下图所示。 ? 为了防止大量dom存在影响性能,我们只对,渲染区和缓冲区数据做渲染,,虚拟列表区 没有真实dom存在。...(初始高度) */ renderList: [], /* 渲染列表 */ itemHeight: 60, /* 每一个列表高度 */...具体思路 ① 初始计算容器高度。截取初始列表长度。这里我们需要div占位,撑起滚动条。

1.7K20

虚拟滚动之原理及其封装

你可能注意到了上面的测试代码中时间计算过程中并没有直接在调用完 API 之后直接计算时间,而是使用了一个 setTimeout,按照正常逻辑似乎、完全、可以这么写: const start = Date.now...相比较于懒渲染,虚拟滚动要求一次性全部拿到数据,但是滚动条能够完全正确地反映当前页面在全部数据位置。滚动无非是对几十个dom进行操作,可以达到极高后续渲染性能。...react方面的封装有 https://bvaughn.github.io/react-virtualized/#/components/List 参考它实现,是时候考虑封装了。就定名VList吧。...初始字段 数据类型 说明 itemHeight Number 每项高度 container DOM 滚动容器 containerContent DOM 滚动内容 maxHeight Number 不撑起滚动条最大高度...实现 实现虚拟滚动就是处理滚动条滚动后可见区域变更,其中具体步骤如下: 1.计算当前可见区域起始数据 startIndex2.计算当前可见区域结束数据 endIndex3.计算当前可见区域数据

9.8K20

关于虚拟DOM(面试必看)

但时下来看,越来越多模板引擎正在引入虚拟 DOM,模板引擎最终也将走向现代 出于严谨,还是要解释下。真实历史中虚拟 DOM 创作过程,到底有没有向模板引擎去学习,这个暂时无从考证。...虚拟 DOM 不是别的,正是前端开发们为了追求更好研发体验和研发效率而创造出来高阶产物 虚拟 DOM 并不一定会带来更好性能,React 官方也从来没有虚拟 DOM 作为性能层面的卖点对外输出过...,再将最终结果交给渲染函数,最终实现集中 DOM 批量更新 React虚拟DOM 在 JSX 使用中,JSX 所描述结构,会转译成 React.createElement 函数,React...DOM 树差异;•渲染函数,渲染整个虚拟 DOM 树或者处理差异点 正是由于计算与渲染分工,才会有React 与 ReactDOM 是两个库,其中 React 主要工作是组件实现、更新调度等计算工作...虚拟 DOM 内部确保了字符转义,所以确实可以做到这点,但 React 存在风险,因为 React 留有 dangerouslySetInnerHTML API 绕过转义 没有虚拟 DOM 不能实现跨平台吗

12810

React-Native入门指南 终章

2、如何正确运行UI组件Example 我们可以到react-nativegithub项目地址找到example,地址是https://github.com/facebook/react-native...只是因为React是作为MVC中V,是为UI而生,所以,React-Native使用JSX更能像HTML样表达树形结构,其实HTML超类就是XML,React-Native将这个带到了解放前,不可否认是...render:渲染视图 componentDidMount:渲染视图完成后 componentWillUnmount:组件被卸载之前 3、了解虚拟DOM React进行了虚拟DOM封装,所有的视图更新都是虚拟...为什么这么做,因为现在机器内存已经足以支撑这样视图UIdiff计算,用内存计算换取UI渲染效率。...:正在装载组件; Updating:重新计算渲染组件; Unmounting:卸载组件 八、动手写组件 React-Native核心思想就是组件,相当于MVCview,因此开发应用最佳方式就是将功能组件

1.5K20

mini react-window(二) 实现可知变化高度虚拟列表

但是也有一些场景是例如有图片,我们高度是一种,没有是另一种,这种情况也适合一些常见场景即高度可控,本小节我们看下不同子项高度情况下容器高度和每个元素 size 和 offset 如何计算得到。...,对应 offset 偏移量也没有规律,滚动效果与固定高度类似,只是渲染可视区域内元素,上下多渲染两个,避免快速滚动白屏。...initInstanceProps 方法,通过上面的实现分析我们知道,我们需要缓存计算元素信息,也要预估起始元素高度和容器总高度,所以该方法是我们初始信息用const DEFAULT_ESTIMATED_SIZE...+ totalSizeOfMeasuredItems;};看下我们自己实现效果:图片图片优化我们在查找起始索引时候使用线性遍历,从索引 0 开始计算,这样很容易理解,在官方库里这里使用二分查找...high = middle - 1 } } if (low > 0) { return low - 1 } else { return 0 }}本小节我们实现了可计算高度虚拟列表

1.6K40

理解浏览器重绘和回流

然后请求 CSS (层叠样式)文件。...这里每个节点都是一个盒子(box),应用盒子模型,有它们各自 width、padding、margin 等元素。 渲染树生成后,先是会计算 “布局”,然后分层,最后进行栅格(渲染)。...当元素物理信息发生变化时,其后元素就会改变位置,此时就要重新进行布局,计算元素物理信息。 比如修改元素高度,将元素设置为 display: none; 等操作会导致重排。...像是 Vue 和 React 通过虚拟 DOM 找出不同,以减少更新 DOM 操作; 尽量将要添加元素都生成好,再一次性添加到文档流中,而不是一个个加上去; 缓存好要用布局信息。...好在我们平常使用类似 Vue 和 React 框架,能够通过对比新旧虚拟 DOM 减少对真实 DOM 操作,将 GPU 密集转移到了 CPU 密集,也算各有利弊吧。

51221

「前端架构」React和Vue -CTO选择正确框架指南

React学习曲线 我观察到许多开发人员声称,如果使用Vue,他们在React中所做事情会更好、更容易。但是所有这些声明对我来说都没有意义。...就我个人而言,我真的很喜欢这样,但是对于开发者来说,如果他们有很多选择的话,做出正确选择并不总是那么容易。此外,React没有明确规则或规章。...此外,学习如何使用诸如React Router和Redux这样库,以便在没有任何问题情况下执行服务器端呈现,也是很重要React团队宣布官方支持将很快发布。...还有一个框架可以用来创建一个React SSR应用程序,叫做Next.js。因此,React启用了SSR,但没有官方支持,并且使用了额外第三方包。...React性能和内存消耗 性能:如图所示,当DOM更新越来越大,需要更新更多数据时,React虚拟DOM似乎获得了回报。这就是大多数React出现性能问题。

4.3K20

UITableView 组件

组件方案 为了解决如上问题,同时也受到 IGListKit 和 React.js 启发,M80TableViewComponent 提出了一种组件解决方案,实现类似 React.js “单向数据绑定...” 功能,同时将大量重复计算归纳在组件内部,上层使用者只需要根据当前业务创建相应组件并组合使用即可。...[1240] 具体效果详见 Example Project 特性 看完上述使用方式后,你很可能将 M80TableViewComponent 当成一种固定数据源组装方式而已,并没有其他新意。...后续再次刷新将自动获取对应高度而无需再次计算。当一个 cell 有多重状态,需要在不同状态下展示不同高度时,则可以通过业务状态返回不同 diffableHash 进行高度切换。...除了高度缓存外,M80TableViewComponent 也提供了一种预计算高度机制,在组装完 cell component 后,只需要简单调用基类方法 measure 就可以直接完成预计算

1.5K30

TDesign 更新周报(2022 年 4 月第 2 周)

树形结构中,新增 toggleExpandData,用于控制行展开 树形结构中,无法获取到正确 rowKey 时,抛出错误,提醒用户修改 table-layout: fixed 模式,且内容超出时,...设置默认列宽为 100,避免出现列宽为 0 消失情况 即使没有行选中列,依然支持 selectedRowKeys 添加类名 行选中和行类名透传,同时存在时,自定义行类名透传失效问题 修复 tfoot>...由之前两个 table 分别渲染 thead 和 tbody,更为一个 table 行拖拽排序功能,使用方法有调整,从 sortOnRowDraggable 更为 dragSort='col' 表头更为使用...优化表格最后一列 ellipsis 浮层位置底部右对齐 新增超出省略功能, ellipsis 支持透传 Popup 组件全部属性 新增尾合计行,支持固定在底部,支持多行合计,支持完全自定义内容 新增...发布 0.1.2 版 Bug Fixes 修复构建产物丢失 CSS Token 问题 修复图表文字重叠问题  详情见:https://github.com/Tencent/tdesign-react-starter

2K10
领券