Long list optimization

[benjycui]

ref: https://blog.jscrambler.com/optimizing-react-rendering-through-virtualization/

• [ ] Select #7086 #14540
• [ ] AutoComplete #17604
• [ ] Dropdown #8076
• [ ] Cascader #9079
• [ ] Table #12408
• [ ] List
• [ ] Tree #15039 #19522
• [ ] TreeSelect #13266

[yesmeck]

看了下文章最后讲到 Reactabular，它实现的 virtualization 效果确实很好，不过表格我感觉暂时还不需要这个，因为现在是数据不多的时候也会有性能问题，而且数据多的时候还是建议分页吧。

[yesmeck]

原来 react-lazyload 给没在 viewport 的组件也渲染一个 div 是为了填充高度，让滚动条能正确显示，这个还是 Reactabular 和 react-virtualized 的实现比较高明。

Reactabular 是上下各渲染一个 tr，然后高度分别设成没显示的行高度之合。

react-virtualized 是在列表外面套一个 div，把高度撑起来，然后通过 position: absolute; top: 36700px; 来调整要显示元素的位置。

[paranoidjk]

react-virtualized 和 react-infinite 都需要给出每个 item 的高度，感觉这点是个限制。

在能确定每个 Item 的行高前提下，基于 react-infinite 包装的 table-view，效果还行。

[benjycui]

别贴内网地址。。。

[benjycui]

react-virtualized 和 react-infinite 都需要给出每个 item 的高度，感觉这点是个限制。

How about minItemHeight or minRowHeight. According to me, if we know the min height of all rows, it will be enough to react-virtualized and react-infinite

[paranoidjk]

yep，both height and minHeight will work

[wangtao0101]

被这个问题折磨了很久了，昨天终于做了下支持任意高度的scroll list方案。react-list-any-height

[benjycui]

@wangtao0101 文档都不写个？

[wangtao0101]

@benjycui 兄弟，还没来得及写呀。

[wangtao0101]

@benjycui 文档ok了

[tiffon]

I can't read most of this thread, so apologies if this is not relevant, but I thought I'd share the approach we took with virtualized scrolling in Jaeger UI. It's not generalized, at this point, but might still be worth a gander.

jaegertracing/jaeger-ui - src/components/TracePage/TraceTimelineViewer/ListView/index.js

The items do not need to be fixed heights (possibly similar to react-list-any-height):

src/components/TracePage/TraceTimelineViewer/ListView/index.js#L321,L373

Some notes from the PR:

Started with react-virtualized, but issues around flashes of un-rendered regions while scrolling and dynamically sized / periodically changing content lead to revival of old project that essentially does the same thing: src/components/TracePage/TraceTimelineViewer/ListView/*.

ListView is more optimized to our needs (and less versatile). These optimizations include:

• Taking the approach of rendering less often and larger amounts of items per render
• Optimizing for scrolling in both directions instead of only the current scroll direction
• Having a concept of minimum and regular "overscan", which means if the currently rendered list of items meets a minimum buffer, don't render more, but if it doesn't, then render enough meet the minimum buffer and some extra, as well

Also, most excellent work on Ant Design! It's a joy to work with :+1:

[Nokecy]

有计划在什么版本加入吗？

[SeanCraftsman]

I met the same problem. Is there any progoress ?

[nunohora]

having the same issue.

[aindong]

Are there any progress on this?

[tiffon]

@SeanCraftsman, @nunohora, @aindong – using react-virtualized resolved the issue, for me, which is described here in the docs.

[swillis12]

@tiffon this will work for a List but I cannot figure out how to do this for Table.

[jorisre]

Hi, what's the best way to use TreeSelect with react-virtualized ?

[MatthieuCoelho]

Is there any progress on this? Is it possible to combine react-virtualized with Antd table ?

[JonDum]

react-virtualized 和 react-infinite 都需要给出每个 item 的高度，感觉这点是个限制。 在能确定每个 Item 的行高前提下，基于 react-infinite 包装的 table-view，效果还行。

@paranoidjk @benjycui Just fyi, react-virtualized also works with rows of unknown height that size the elements on the fly: https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md

[JonDum]

Also, my thoughts on this: It may not be necessary to replicate virtualization within antd. Perhaps instead exposing a render method that is in charge of providing the Menu/Table rows so that a user can implement virtualization on their own would be a good start.

[tiffon]

FYI, I think react-window is the next-gen react-virtualized.

https://github.com/bvaughn/react-window

On Thu, Jul 5, 2018, 4:01 AM Jonathan Dumaine notifications@github.com wrote:

Also, my thoughts on this: It may not be necessary to replicate virtualization within antd. Perhaps instead exposing a render method that is in charge of providing the Menu/Table rows so that a user can implement virtualization on their own would be a good start.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ant-design/ant-design/issues/3789#issuecomment-402638593, or mute the thread https://github.com/notifications/unsubscribe-auth/ACMpUchXXaG0moutACfeWCLTQTZqoadnks5uDcfdgaJpZM4KueVV .

[chenxiaochun]

所以，类似的问题，就木有然后了吗？😳

[damiangreen]

It's also really slow with the Transfer component

[tunaung22]

what is the current workaround to use antd table with react-virtualized ? I've got no idea on rendering antd table with react-virtualized table while react-virtualized list can be used with antd's list using rowRenderer props. or Just use react-virtualized table with custom styles without using antd table ?

[kino90]

Any update on this?

[Naiqin]

性能问题还是很明显的，希望能尽快解决！

[damiangreen]

I would be interested in creating a PR that solves this, using React Window. What are the mantainers thoughts on introducing this depedency?

[swillis12]

I would be interested in creating a PR that solves this, using React Window. What are the mantainers thoughts on introducing this depedency?

I've needed this badly for a while now. I may be forced to implement my table outside of AntD using react-window for now. Until this is supported, the performance is unacceptable for long lists and I need a usable table with many rows (needs virtualization).

[kino90]

@swillis12 in my team we are using react-tabular with great performances, if that could be of any help :)

I'd still want to see this issue marked as resolved.. Long lists are unusable at the moment..

[zoxiyo]

持续关注此问题。业务需求没办法仅仅通过分页来解决~

[afc163]

https://github.com/bvaughn/react-window

Maybe we should make this built-in.

[Nokecy]

这个Issues都开了2年了。。。。。。

[kino90]

Better late than never! 😉

[zenoven]

so, any progress ?

[genui-eeshan]

Hey! We'd love this! How's it coming?

[WangJM001]

项目要用到treetable且可能存在大量节点，所以我基于antd的table修改了代码增加了虚拟加载，demo每个节点下1999个子节点，可能还有bug存在没有详细测试 参考react-window项目，感谢下前几楼提供的细路，因为刚接触前端，代码改的有点乱，有时间我重新整理下贴出来，有需要的可以参考下

[52flutter]

关注+1

[flyingcrp]

还有一个奇怪的问题.当 Form 和 Table 在作为兄弟组件存在时,Form上的输入会非常卡.尤其是当Table存在fixed 的时候,整个页面基本处于不可用操作的状态.Table 数据后台分页了的,每页30行.稍后我会补一个demo .通过 react tool 发现,当有键盘事件触发时都会导致整个组件从新渲染.现在暂时解决办法是把所有同级的Form拆出去.但是列表页面的任何操作依然会导致页面卡爆.

[flyingcrp]

package.json

"antd": "^3.12.3",
 "react": "^16.3.2",

页面除了在DidMount中进行了数据加载外未做任何其它的逻辑.

[fgiarritiello]

Can anyone please give us an update if this is going to be implemented? If so, can we please know when it will be available. This is becoming a blocker in our application and will need to consider to drop Antd in order to move on, which is sad because I really like the this framework.

[fgiarritiello]

I would be interested in creating a PR that solves this, using React Window. What are the mantainers thoughts on introducing this depedency?

I've needed this badly for a while now. I may be forced to implement my table outside of AntD using react-window for now. Until this is supported, the performance is unacceptable for long lists and I need a usable table with many rows (needs virtualization).

@swillis12 Hi, how did you end up dealing with the table performance issue?

[dingchaoyan1983]

如果列特别多的情况下，我们的一个需求是列有 70 多列，需要都展示出来，即使做了分页也还是会非常卡顿

[tiffon]

I believe the docs have examples with react- virtualized, which should do the trick.

On Thu, Mar 28, 2019, 4:48 AM Dane notifications@github.com wrote:

如果列特别多的情况下，我们的一个需求是列有 70 多列，需要都展示出来，即使做了分页也还是会非常卡顿

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ant-design/ant-design/issues/3789#issuecomment-477502300, or mute the thread https://github.com/notifications/unsubscribe-auth/ACMpUYf-yuPS8ag-mr47H7b4Z2rWHVnLks5vbIHSgaJpZM4KueVV .

[buhichan]

同关注这个issue一年多了... 还没解决... 然后react-virtualized和react-window太复杂特性太多 不需要那些特性 文档懒得看的我 自己造了个小巧的轮子 特点是除react没有其他依赖, 然后每行高度可以是动态的, 不需要提前给出

[Nokecy]

https://github.com/Autodesk/react-base-table look at this

GitHub

Autodesk/react-base-table

A react table component to display large datasets with high performance and flexibility - Autodesk/react-base-table

[woohs]

关注中...业务需求要显示1000行数据。

[yujiaze]

https://github.com/bvaughn/react-window

Maybe we should make this built-in.

any further progress ?

[douglasjunior]

I'm trying to create a TimePicker with a Input and Dropdown, so I need to render 1440 items (24 hours * 60 minutes) in the Dropdown overlay with Menu, because Dropdown dont works whit others components.

But the dropdown performance with this amount of data is terrible.

So, my question is: What can I do to use the react-window as dropdown overlay?

[yoonwaiyan]

Would like to spread out my concern here too. We've been trying to render a select dropdown for a list with the full list of Google Product Taxonomy but it's very slow with few seconds of lagging before I could see the dropdown. What's the progress so far?