為什麼Ant Design的Table效能這麼低?

時間 2021-05-07 08:47:21

1樓:

ant-design引用的也是rc-table,通過components可以定製tr, td等來優化效能的,官方文件裡也提供有

2樓:Refector

hover 導致重新計算虛擬 dom,加上 diff 時間是比較耗時,200 行資料考慮加上分頁和過濾,20行的列表嘗試耗時是多少?

想一想,做react元件,也未必非要利用修改state 觸發渲染,只要保證狀態是同步即可,比如hover時直接修改dom,在元件例項上加個變數儲存狀態,注意不是state,重新渲染時,通過這個變數渲染,保持狀態同步,再次渲染,狀態也不會丟失

3樓:Jason Chen

AntDesign 的 Table 元件本身就處理了 mouse 事件,hover 的藍底都是操作 class 而不是 css。

還有本身 table 的效能就會比 div 差一點,這一點其他的回答也有提到。

最好能截屏出火焰圖,看看最耗時的函式呼叫是哪個另外我還想提一點,AntDesign 這種通用元件庫,一般沒法處理好比較極端下的效能,如果有十分定製的需求,例如長列表(200 行很多了),定製 mouseover,建議不要用 Table 元件了,直接用 div 自己做 list,可以復用 css 樣式唄。

4樓:

Table問題,其實比Form問題更難搞,更多的是因為瀏覽器限制和React影響,才造成Table渲染效能很差,為什麼Ant Table不選用虛擬滾動?其實有它的考慮,因為虛擬滾動要求每個cell都是定高的,否則沒法計算虛擬滾動的位置,但是對於實際業務情況,每個cell的內容完全不是定高的,所以這就很難搞了,還有就是table/th/td/tbody/thead這些標籤的渲染是比div渲染慢的,所以現在很多table元件都已經採用div渲染了,比如 https://

,這個ant table倒是可以借鑑。還有就是React這一層,還是回到單向資料流,每次狀態同步所有cell都得全量渲染,這個明顯是效能瓶頸了,但是對於table渲染,因為每次拿到資料都是乙份完整的資料,只能每次都做全量渲染才能做資料同步,根本沒法做分布式渲染,不過,有乙個方案,借助React Concurrent將每個cell元件的渲染變成分批渲染,這樣就能保證每一幀的平滑執行,不過就是不知道React Concurrent會提供怎樣的API來支援元件的分批渲染。

Ant Design 被刪庫,發生什麼事了?

vimcaw 現在ant design原名倉庫已經恢復 或者重新新建了乙個?但是可以看到 star 數清空了,目前只有1.5k 個 star,issue 之類倒是還在,官方推特也沒有更新來進一步的說明,不知是重新創了乙個還是 Github 因某種原因無法恢復 star 資料,背後的原因還是等待官方的...

已經不想跟Ta復合了,為什麼想起Ta還是那麼難過?

我只是想說下自己的故事,因為太難過了特別想找個地方說出來。真的愛上了乙個人之後,又失戀了,有多難過呢?我愛過的那個人有些我難以接受的性格問題的,因為這個原因,我們吵架分手了,也是因為這個原因,我在理智上已經決定了不會跟他在一起。分開有半年了,但是直到今天晚上,還是會莫名其妙地痛哭,不知道在哭什麼,既...

你為什麼忘不掉TA?

Too young 忘不掉的是習慣,是放學送她回家,是無時無刻都會想起她。在一起的每一分每一秒你都記得清楚,這些事是你跟另乙個人一起的,突然那個人不見了,你就會懷念,就會忘不掉吧。其實我不願意忘掉,當時那些人和事是多麼美好,就讓它在我的腦子裡吧,回想起來還是挺開心的,曾經屬於我的快樂時光。 歐尼醬 ...