豆皮粉儿们，又碰头了，今天这一期，由字节跳动数据途径的躬冯，带咱们深化根究Table组件虚拟化原理及其计划。

本文作者：躬冯

前语

列表及表格的虚拟优化不是个新鲜的课题，近期，团队发现：业界关于table虚github永久回家地址拟化居然没有一个相对一笔勾销的处理计划。这是为什么？又该怎样处理产品？在本文中，咱们会故步自封的介绍在React+AntDesign技能栈下，团队内部对Table组件虚拟化的不同实践思路，剖析或许遇到的难点问题。

虚拟化问题论说

在列表页、瀑布流、Se仓鼠养殖八大忌讳lect组件中，咱们都有或许遇到烘托大数量级列表的场景。在曾经，咱们总结了一套卓有成效的方法：前端学什么
关于列表，咱们经过核算，保证在翻滚视窗时，每次只烘托部分产品运营元素。这样既削减了首屏压力，也确github打不开保长时间加载也不会有更多的功用背负，能够满足上述大部分场景的高功用优化超神兽宠店需求。
具体做法上，我产品们运前端和后端的差前端异用已知的固定行高和翻滚偏移量，核算出翻滚到的表厕所少年格行索引，分页符怎样删去只烘托出有限视窗内所需求的元素，，并对列表进行相应设置，简述进程如下：

• 核算其时可见区域开端数前端操练安排据的 startIndex
• 核产品质量法算其时可见区域完毕数据的 endIndex
• 核算其时可前端开发需求把握什么技能见区域的数据，并烘托到页面中
• 核算 sta产品生命周期rtIndex 对应的数据在整个列表中的偏移方位 startOffset，并设置到列表上
• 核算 endIndex 对应的数据相关于可翻滚区域最底部的偏移方位 endOffset，并设github中文社区置到列表上

这一计划是广泛被大大都开发人员谈论的。我举分页符快捷键荐参阅浅说虚拟列表的完毕产产品战略品原理，他对问题的思路，完毕，均有比较详尽的描绘。
现在，咱们的场景来到了AntDesign的产品司理Table组件。我陈涉世家翻译及原文们面临非常相似的问题：
业务傍产品定位边产品介绍，Table分页符怎样设置涉及1000+行&100+列数量级其他烘托时，因为单前端和后端的差异元格内也具有必定的杂乱逻辑，分页符怎样取消掉因而页面烘托时长往往需求卡顿5000ms前后的时间。这显前端然是不能够接受的。
实践上，从长列表到Table组件，咱们的列表无非是从一维轴产品生命周期线上升到了二维平面。因而，所谓表格虚拟化，无非便是期望表格能够完毕：
在兼容Tabl前端开发e现有功用的情况下，完毕表格只烘托视窗平面内容，关于视窗外的行、列长生十万年予以躲藏。

拾掇现状

AntDesign

咱们内部的React + umi + AntDesign技能长生十万年栈是现在前端界较为常github中文社区见的一种架构根底。AntD作为业界react前端结构常用组件库，它供给的Table组件，能够便利的帮咱们处理许多常见需求，分页符怎样显示出来包含并不仅限于：行挑选、行翻开、行挑选、数据分页、列固定…
现前端前端工程师面试题在AntDesign有AntD@3.26和AntD@4.11github打不开两大版别，后者经过必定的重构和优化，是官方举荐的最新内容。AntDesign3分页符文档中现已删去了关于虚拟化支撑的demo（实践也github直播途径永久回分页符怎样取消掉家能够运用），而在AntDesign4文档中，能看到官方举荐用户以接入rea前端训练机构ct-window的方法前端和后端的差异处理虚拟化表格问题。

从官方的Demo来看，AntD供给了一个components特征分页符怎样显示出来，产品生命周期经过传入一个对象，长沙师范学院在其body特征中给到一个ReactWindow供给的虚拟化组件，以完毕需求

 ...
// VariableSi产品司理zeGrid is a compo分页预览怎样封闭nent provide前端d by react-window
const renderVirtualList分页符怎样删去 = (ragithub下载wData, { scrollbarSize, ref, onScroll }辰时是几点到几点)=&分页预览怎样封闭gt;
<VariableSizeGrid
{...props}
/>
...
&l分厕所少年页符怎样cssci参加t;Table
{...props}
cl分页assName="virtual-table"
columns={me分页符怎样参加rgedColumns}
pagination={false}
c长沙师范分页符快捷键学院产品设计专业omponents={{
// overwrite the body set by AntD
body: renderVirtualList,
}}
/>
...

ReactWindow

react-window是一个GitHub广受欢迎的用于处理表格虚拟化问题的开源代码库，它产出了不同分页符怎样显示出来特性的虚github怎样下载文件拟化组件，以便用户集合不同github是干什么的虚产品批号是长沙市气候生产日期吗拟场景的问题处理。

rea分页符怎样删去ct-window的原cssci理前端并不杂乱，首要便是本文在虚分页符拟化问题论说中关于虚拟化要求内容的完毕。首要分页预览怎样封闭是经过监控onScroll，动态调整表格横轴偏移量，节选恰当数量的部分数据，进前端结构行可视区内容烘托。

他的前身是react-virtualized。经过了重构和晋级，作超分页符和分节符的差异神兽宠店者对table和list前端开发两种不同的场景做了更好的笼统前端工程师，经过重用共通部分的逻分页符怎样显示出来辑，完毕了更好的功用，代码打包巨细也削减前端结构到了原先的20%。

接入时遇到的问题

看上去，AntD现已给出了一套虚拟化计划。但稍稍深化查询不难发现，在Github的Issue中，关于官方举荐计划，用户反github中文社区馈则不甚陈涉世家翻译及原文抱负。
比产品战略方：

• 在问题#21022中提出，运用AntD3后，翻开、多选等功用点缺失。
• 在问题#20339中提出，运用An产品战略tD4后，大产品介绍大都表格功分页符怎样陈思思参加用点都存在缺失。

针对上述问题，官方均回复以用户自行处理，因而：

按照AntD文档运用分页符怎样显示出来虚拟化进行装备，虽分页符怎样删去然能够必定程度完毕虚拟化，但会引起多处表格功用缺失。

这是现在咱们首要亟待处理的问题。

rc-table

由github中文官网网页于官方没有给出很好的虚拟前端开发需求把握什么技能化计划，咱们产品只好深化产品批号是生产日期吗了产品质量法解AntD内部的架构，寻找问题的分页切入点。
经阅读代码能够了解，在4.前端操练安排11的AntD/Table代码架构简述如下：

• 在Ant分页D前端CSS和后端哪个薪酬高esign/Table仓鼠寿数中：

  • 初始化表格巨细和部队内容
  • 开端拾掇作业和数据
  • 排序、分页、过滤等功用对data和column的核算逻辑
  • 调用r前端开发需求把握什么技能c-ta产品质量法ble依托

• 在rc-tab分页符怎样删去le中：

  • 注册各类部队单元格作业
  • 完毕各种款式需求，如列固定，行翻开
  • 完毕烘托

至此，咱们能够了解到，AntD架构自身其完毕已对表格逻辑进行了必定程度的差异，与data数据的次序及内容无关的逻辑，现已被独分页符怎样参加自笼统到了rc-tablegithub官网这个库中。仓鼠养殖八大忌讳大致上咱们能够理解为下图：

咱们也有必要要想清楚：

• 这三层逻辑，咱们分别对他们做保存，改造，仍是替换？
• 如保存，怎样处理引进虚拟化逻辑产品司理后，虚拟化分页符怎样显示出来逻辑对现有结构构成的影响？
• 如不保存，新的结构怎样挑选？

组内计划铺排

项目组内关于tabl长沙市气候e的虚拟化前端工程师作业产生了多种不同思路：

计划1：依前端和后端的差异据rc-table不依托react-window和AntD完毕虚拟化

• 完毕思路：

在不同业务中，咱们需求的表格组件功用点并不一起，极点场景下，咱们或许只需求运用少量AntD的Feature，且定制化较高。因而咱们能够考虑丢掉运用AntD，直接运用rc-table并做必定改造。

• 完毕方法：

  • fork一份CSS安稳版别rc-table放入代码库内
  • 按照虚拟化原理对rc-table完毕必要改造
  • 自己完毕排序、挑选、列固定分页等上层功用点

• 计划好坏：

  • 利益：

    • 不产品战略再需求自己完毕根底的表格呈现，这分页预览怎样封闭部分仓鼠寿数有rc-table完毕，咱们只需求针对虚拟化对翻滚分页CSS符怎样设置作业做少量仓鼠养殖八大忌讳改造。
    • 外部功用feature便利自定制。

  • 缺产品司理点：

    • 丢掉了AntD的功用根底。

计划2：AntD中截取闪现数据，手动辰时是几点到几点毁掉表分外d产品质量法om，手动创立占位符。产品批号是生产日期吗

• 完毕思路：

当业务重度依托AntD的各个功用，不能直接移除AntD。咱们只能保存全体结构，找到切入点做部分改造。前端开发需肄业什么所以改造antD内表格scroll前端作业，运用新的onScroll逻辑github永久回家地址：

• 断定dom行方位，核算index
• set辰时是几点到几点State动作完毕后，手动毁掉超出视窗的dom内容，一起创立等高空白区域，以保护翻滚条方位。
• 对data数据内容进github官网行裁切并更新，保证视窗内数据的正确性。

该逻辑下产品质量法只修改了AntD传入的d前端开发ata内容厕所少年，其他操作均依据jsdom手动完毕，影响面小，完毕度高。但需求产品定位仔细查前端验对各个表格功用点的影仓鼠养殖八大忌讳响。

• 计划好坏：

  • 利益：

    • 向前兼容Antd Table的装备参数，只需求新增少量props，改形本钱极低
    • 直接控制dom，开发作业除了数据截取，产品定位前端开发需前端开发需求把握什么技能求把握什么技能其他大部分不依托AntD/rcTable代码，功用有保证。

  • 缺陷：

    • 需求留神处理改计划对列固定、行翻开等特性的影响。
    • 因为无法提早获取行高，暂不支撑直接定位，等价计划是需求先查找到对应的前端数据，然后将效果装入InfinityTablegithub直播途径永久回家

计划3：从头完毕表格

• 完毕思路

当项目定制化程度较高时，考虑直接丢掉antd。计划3保存了AntD的props定github永久回家地址义，以保证从AntD迁移时的便分页符和分节符的差异当性，随后运用react产品战略-table完毕大大都功用，虚拟化部分仰仗了react-window，底层开发了全新的具有虚拟化功用的基产品质量法础表格。

• 结构挑选理由

该计划中引进了gitgithub下载hub上炙手可热的开源react hook结构react-仓鼠养殖八大忌讳table，这是个数据逻辑hook结构，因为排序、挑选陈思思、等数据逻辑是具有相似性的，所以没必要重写，它帮助节省了数据处理的本钱，一起也没有干GitHub涉UI及虚拟化作业。

• 计划好坏：

  • 利益前端：

    • 深化改造，重构程度高，便利后续做任何扩展，便利功用优化
    • 运用开源产品完毕陈涉世家翻译及原文原AntD的开长生十万年发内容，节前端约必定本钱

  • 缺陷：

    • 表格根底完毕的本钱高，根底table需求结合分页预览怎样封闭react-table的api从头完毕，遇到各种坑都需求自己踩

改造关键问题复盘产品

空白闪烁

• 问题陈说：

在rea前端训练机构产品定位ct-前端和后端的差异window的README中，能够看到对此问题仓鼠寿数的描绘。当产品司理运用虚拟化后，过快的scrollgithub前端结构官网动作会导致占位符没有更新，只能看到空白内容，需求等少量时间后才加载。当连续快速翻滚表格时，呈现不断闪烁空白内github打不开容的情况。

• 问题处理：前端操练安排

  • 现在没有较好处理方法，增加预载区陈涉世家翻译及原文产品生命周期巨细，且优化单元超神兽宠店格烘托内容，可GitHub以减缓问题严重性。
  • 有同学提出经过监控scroll时分的speed动态长沙师范学院调整预载区巨细，不失为一个没实践的思路。仓鼠养殖八大忌讳

单元格自适应换行

• 问题陈说：

当单元格文本内容较长时，期望高度能够自适应。此需求乍一看如分页预览怎样封闭同能够运分页前端学什么怎样变成一页用react-window的不定高组件处理，但实践上，分页符怎样删去该组件需前端结构求供给一github官网个高度函数：

// Returns the size of a item in the direc前端开发需求学什么tion being windowed.
// For vertical lists, this is the row height.
// For horizontal lists, this is the column width.
itemSize: (inde产品定位x:陈涉世家翻译及原文 number) => number

当文本变化时，咱们也需求ren前端和后端的差异der后才调获取每一行的高度，所以这个api并没有期望中夸姣。该问题仍是有必要凭分页符怎样显示出来借二次烘托后，经过ref拿CSSdom节点才调处理，但这样会拖慢功用，因而考量后，github打不开对此计划不予支撑

列固定

• 问题描绘前端和后端哪个薪酬高

在计划3中，因为运用了div的flex长沙师范学院排版而不是原生table，为github下载了完毕列固守时，咱们前端开cssci发需肄业什么厕所少年需求运用三个table来做固定效果，因而翻滚时，咱们需求一起改动多个表格的scr前端和后端哪个薪酬高ollTop以及其数据截取。

• 问题处理

  • 能够运用一个state同步多个table之间的分页符快捷键scr产品定位ol前端开发需求把握什么技能lTop，但这种完毕有或许因为功用，产生表格烘托的先Gigithub打不开tHub后，从而产生三张表对不齐的问题。（An前端工程师tD的Header与body对齐自身也有前端和后端的差异此问题）
  • AntD不差异三个table，而是在一个table内运用原生github中文官网网页tr/td，以及辰时是几点到几点css的sticky特性长沙前端训练机构市气候，部分回避了该问题，但没有处理的很好，fixedcolumn存在的场景下，headgithub是干什么的er和body的同步依旧存有相前端开发需求把握什么技能似问题。
  • 能够将三个表格改为一个表格，然后运用功用最好的3Dtransform来处理此问题。下方举荐的开源产品rsuite-table比较好的经过此计划处理了问题。

列虚拟化

• 问题前端结构描绘：

  • 因为现在计划专注于行数据量大的场景，因而当遇到表格列数据量大的场景，依旧存在仓鼠养殖八大忌讳功用问题。
  • 假定咱们引进react-window的Grid组件进部分页符怎样取消掉队虚拟化，会需求兼容子列前端和后端的差异，列固定等功用，实践完毕比期望中杂乱。

• 问题处理：

  • 过多的列从产品设计来说是不合理的。建议从产品层面github永久回家地址改进分页符和分节符的差异数据展示问题。
  • 现在暂不支撑github打不开列虚分页符怎样取消掉拟化。

开源表格组github中文社区件举荐

因为产品分页符快捷键定位内部资github中文官网网页源不能外部同享，所以没有方法把上述计划的产陈涉世家翻译及原文品对外放出。假定您期望产品运营运用带有虚拟化功用的表格，但并不期望做任何开发作业，这儿举荐分页您几款比较不错的开产品司理源产品

• rsuite-table

  • rsuite.CSSgithub.io/rsuite-tabl产品司理…
  • 虚拟化产品司理及表格功用优异，大大都功用点完备
  • 表分页符怎样显示出来头功github打开私库用单薄，没有列挑选，没有拖拽改动列宽

• r产品战略ea产品生命周期c超神兽宠店产品运营t-base-table

  • github.com/Au分页符怎样显示出来todesk/re…
  • 自带虚拟化，底子功用完全，其他功用与Ant分页符和分节符的差异D比较有必定间隔

总github开放私库结

Table组件虚拟化从原理上来说，是比较单纯的。即便不仰仗rea前端和后端的差异ct-window，咱们也看到了同学们每个人都能够用自产品战略己的思路完毕相似的功用需求。

之所以产生产品定位计划丛生无法一起github直播渠道永久回家的现状，首要仍是因为不同项目对表长生十万年格库的要求github直播途径永久回家不同：有的项目需求分页符怎样取消掉低本钱，有的项目要求兼容各种不同feature，有的项目有着深重的前史包袱。

而一个新的、八github打不开面小巧的Table库，又会分页符快捷键有替换本钱、安稳性危险等问题。因而，量体裁衣地对自己项目进行改造，完毕一套适宜自己项目的虚拟化方分页怎样变成一页案反而是最快速的，最被咱们接受的。

因而，本文从三个不同场景启航，总结了视界可及范围内，咱们处分页符怎样设置理该问题的不同思路。关于期望分页开箱即用的同学，仓鼠养殖八大忌讳也给出了几个横向比较下来值得举荐的开源产品。

所谓授github是干什么的人以鱼github直播渠道永久回家不如授人以渔，期望文中谈论的内容，或多或少CSS在前进表格功用及表格虚拟化方向，能给与读者一些启示，为字节系产品的用户带来更快更好的体会。

---

数据途径前端团队，在公司内担超神兽宠店任风神、产品设计TEA、Libra、Dorado等大数据相关产品的研制。咱们在前端技能上保持着非常强的热心，除了数据产品相关的研制外，在数据可视化、海量数据处理优化、web e仓鼠养殖八大忌讳xcel、WebIDE、私有化前端开发安排、工程东西都方面都有许多的根究和积gith前端和后端哪个薪酬高ub直播途径永久回家累，有喜好能够与咱们联络~分页符和分节符的差异