Ant-design: Optimasi daftar panjang

Setelah membaca artikel dan akhirnya membahas tentang Reactabular, efek virtualisasi yang diimplementasikannya benar-benar bagus, tetapi saya tidak merasa tabel ini diperlukan untuk saat ini, karena sekarang ada masalah performa saat tidak banyak data, dan paging disarankan jika data terlalu banyak. Baik.

Ternyata react-lazyload juga merender div untuk komponen yang tidak ada di viewport untuk mengisi ketinggian sehingga scroll bar dapat ditampilkan dengan benar, ini adalah implementasi dari Reactabular dan react-virtualized.

Reactabular membuat tr di atas dan di bawah, lalu tingginya disetel ke tinggi baris yang tidak ditampilkan.

react-virtualized adalah meletakkan div di luar daftar, menopang ketinggian, dan kemudian menyesuaikan posisi elemen yang akan ditampilkan melalui position: absolute; top: 36700px; .

Baik react-virtualized dan react-infinite perlu memberikan ketinggian setiap item, yang terasa seperti batasan.

Di bawah premis bahwa tinggi baris setiap Item dapat ditentukan, tampilan tabel berdasarkan paket react-infinite tidak buruk.

Jangan tempel alamat intranet. . .

Baik react-virtualized dan react-infinite perlu memberikan ketinggian setiap item, yang terasa seperti batasan.

Bagaimana dengan minItemHeight atau minRowHeight . Menurut saya, jika kita mengetahui tinggi min dari semua baris, cukup untuk react-virtualized dan react-infinite

ya, height dan minHeight akan berfungsi

Setelah lama tersiksa oleh masalah ini, kemarin akhirnya saya membuat solusi scroll list yang mendukung ketinggian apapun. react-list-any-height

@ wangtao0101 tidak menulis dokumen?

@benjycui brothers, saya belum punya waktu untuk menulis.

@benjycui document ok

Saya tidak dapat membaca sebagian besar utas ini, jadi mohon maaf jika ini tidak relevan, tetapi saya pikir saya akan membagikan pendekatan yang kami ambil dengan pengguliran virtual di Jaeger UI. Ini tidak digeneralisasikan, pada saat ini, tetapi mungkin masih layak untuk dilihat.

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

Item tidak perlu memiliki ketinggian tetap (mungkin mirip dengan react-list-any-height ):

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

Beberapa catatan dari PR :

Dimulai dengan react-virtualized , tetapi masalah seputar kilatan wilayah yang tidak dirender saat menggulir dan secara dinamis mengukur / mengubah konten secara berkala mengarah pada kebangkitan proyek lama yang pada dasarnya melakukan hal yang sama: src/components/TracePage/TraceTimelineViewer/ListView/* .

ListView lebih dioptimalkan untuk kebutuhan kita (dan kurang serbaguna). Pengoptimalan ini meliputi:

• Mengambil pendekatan rendering lebih jarang dan jumlah item yang lebih besar per render
• Mengoptimalkan pengguliran di kedua arah, bukan hanya arah gulir saat ini
• Memiliki konsep "overscan" minimum dan reguler, yang berarti jika daftar item yang saat ini dirender memenuhi buffer minimum, jangan merender lebih banyak, tetapi jika tidak, render cukup memenuhi buffer minimum dan beberapa tambahan, seperti baik

Juga, karya terbaik tentang Desain Semut! Sungguh menyenangkan bekerja dengan: +1:

Apakah ada versi yang akan ditambahkan?

Saya bertemu masalah yang sama. Apakah ada kekuatan?

mengalami masalah yang sama.

Apakah ada kemajuan dalam hal ini?

@SeanCraftsman , @nunohora , @aindong - menggunakan react-virtualized menyelesaikan masalah, bagi saya, yang dijelaskan di sini di dokumen.

@ Tiffon ini akan bekerja untuk Daftar tetapi saya tidak tahu bagaimana melakukan ini untuk Tabel.

Hai, apa cara terbaik untuk menggunakan TreeSelect dengan react-virtualized?

Apakah ada kemajuan dalam hal ini? Apakah mungkin untuk menggabungkan tabel react-virtualized dengan Antd?

Baik react-virtualized dan react-infinite perlu memberikan ketinggian setiap item, yang terasa seperti batasan.
Dengan alasan bahwa tinggi baris setiap Item dapat ditentukan, tampilan tabel berdasarkan paket react-infinite tidak buruk.

@paranoidjk @benjycui Hanya fyi, react-virtualized juga berfungsi dengan baris dengan ketinggian yang tidak diketahui yang mengukur elemen dengan cepat: https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md

Juga, pemikiran saya tentang ini: Mungkin tidak perlu mereplikasi virtualisasi dalam antd. Mungkin sebaliknya mengekspos metode render yang bertugas menyediakan baris Menu / Tabel sehingga pengguna dapat mengimplementasikan virtualisasi mereka sendiri akan menjadi awal yang baik.

FYI, saya pikir react-window adalah react-virtualized next-gen.

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

Pada Kamis, 5 Juli 2018, 04:01 Jonathan Dumaine [email protected]
menulis:

Juga, pikiran saya tentang ini: Mungkin tidak perlu ditiru
virtualisasi dalam antd. Mungkin malah mengekspos metode render itu
bertugas menyediakan baris Menu / Tabel sehingga pengguna dapat mengimplementasikannya
virtualisasi sendiri akan menjadi awal yang baik.

-
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/ant-design/ant-design/issues/3789#issuecomment-402638593 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/ACMpUchXXaG0moutACfeWCLTQTZqoadnks5uDcfdgaJpZM4KueVV
.

Jadi, apakah ada masalah serupa? 😳

Ini juga sangat lambat dengan komponen Transfer

apa solusi saat ini untuk menggunakan tabel antd dengan react-virtualized ?
Saya tidak tahu cara merender tabel antd dengan tabel react-virtualized sementara daftar react-virtualized dapat digunakan dengan daftar antd menggunakan alat peraga rowRenderer.
atau Cukup gunakan tabel react-virtualized dengan gaya kustom tanpa menggunakan tabel antd?

Ada pembaruan tentang ini?

Masalah kinerja masih terlihat jelas, semoga bisa diselesaikan secepatnya!

Saya akan tertarik untuk membuat PR yang memecahkan masalah ini, menggunakan React Window. Apa pendapat mantainers tentang memperkenalkan ketergantungan ini?

Saya akan tertarik untuk membuat PR yang memecahkan masalah ini, menggunakan React Window. Apa pendapat mantainers tentang memperkenalkan ketergantungan ini?

Saya sangat membutuhkan ini untuk sementara waktu sekarang. Saya mungkin terpaksa menerapkan tabel saya di luar AntD menggunakan jendela reaksi untuk saat ini. Sampai ini didukung, kinerjanya tidak dapat diterima untuk daftar yang panjang dan saya memerlukan tabel yang dapat digunakan dengan banyak baris (perlu virtualisasi).

@ swillis12 di tim saya, kami menggunakan react-tabular dengan kinerja luar biasa, jika itu bisa membantu :)

Saya masih ingin melihat masalah ini ditandai sebagai terselesaikan .. Daftar panjang tidak dapat digunakan saat ini ..

Tetap perhatikan masalah ini. Tidak ada cara untuk menyelesaikan kebutuhan bisnis hanya melalui paging ~

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

Mungkin kita harus membuat ini built-in.

Masalah ini telah dibuka selama 2 tahun. . . . . .

Lebih baik terlambat daripada tidak sama sekali! 😉

jadi, ada kemajuan?

Hei! Kami akan menyukai ini! Bagaimana kabarnya?

Proyek ini menggunakan treetable dan mungkin memiliki sejumlah besar node, jadi saya memodifikasi kode berdasarkan tabel antd dan menambahkan pemuatan virtual. Ada 1999 sub-node di bawah setiap node demo, dan mungkin ada bug tanpa pengujian terperinci.

Lihat proyek react-window, terima kasih atas jalan bagus yang disediakan oleh beberapa lantai pertama, karena saya baru menyentuh bagian depan, perubahan kode agak berantakan, saya punya waktu untuk mengatur ulang dan mempostingnya, dan Anda dapat merujuknya jika perlu

Ikuti +1

Ada juga masalah yang aneh. Ketika Form dan Table ada sebagai komponen saudara, masukan pada Form akan sangat macet. Terutama jika Table Ketika ada fixed , seluruh halaman pada dasarnya dalam keadaan tidak tersedia. Table Data dihalaman di latar belakang, 30 baris per halaman. Saya akan menambahkan demo nanti. Lulus react tool menemukan bahwa saat peristiwa keyboard dipicu, seluruh komponen akan dirender ulang. Solusi sementara adalah menghapus semua Form level yang sama. Namun, operasi apa pun pada halaman daftar masih akan menyebabkan halaman macet.

package.json

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

Halaman ini tidak melakukan logika lain kecuali untuk memuat data di DidMount.

Adakah yang bisa memberi kami pembaruan jika ini akan diterapkan? Jika demikian, dapatkah kami mengetahui kapan itu akan tersedia. Ini menjadi pemblokir dalam aplikasi kami dan perlu mempertimbangkan untuk menjatuhkan Antd untuk melanjutkan, yang menyedihkan karena saya sangat menyukai kerangka ini.

Saya akan tertarik untuk membuat PR yang memecahkan masalah ini, menggunakan React Window. Apa pendapat mantainers tentang memperkenalkan ketergantungan ini?

Saya sangat membutuhkan ini untuk sementara waktu sekarang. Saya mungkin terpaksa menerapkan tabel saya di luar AntD menggunakan jendela reaksi untuk saat ini. Sampai ini didukung, kinerjanya tidak dapat diterima untuk daftar yang panjang dan saya memerlukan tabel yang dapat digunakan dengan banyak baris (perlu virtualisasi).

@ swillis12 Hai, bagaimana Anda akhirnya menangani masalah kinerja tabel?

Jika terdapat terlalu banyak kolom, salah satu syarat kami adalah mencantumkan lebih dari 70 kolom yang perlu ditampilkan, bahkan jika paging sudah selesai akan tetap sangat tertinggal.

Saya yakin dokumen memiliki contoh dengan react- virtualized, yang seharusnya cukup
Trik-nya.

Pada Kamis, 28 Mar 2019, 4:48, Dane [email protected] menulis:

Jika terdapat terlalu banyak kolom, salah satu syarat kami adalah mencantumkan lebih dari 70 kolom yang perlu ditampilkan, bahkan jika paging sudah selesai akan tetap sangat tertinggal.

-
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/ant-design/ant-design/issues/3789#issuecomment-477502300 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/ACMpUYf-yuPS8ag-mr47H7b4Z2rWHVnLks5vbIHSgaJpZM4KueVV
.

Saya telah mengikuti masalah ini selama lebih dari setahun ...
Belum terselesaikan ...
Kemudian react-virtualized dan react-window terlalu rumit dan terlalu banyak fitur, dan saya tidak perlu dokumen fitur itu terlalu malas untuk membaca, saya membuat roda kecil sendiri <br i="8"/> Fiturnya adalah tidak ada ketergantungan lain kecuali untuk bereaksi, dan tinggi setiap baris Bisa dinamis, tidak perlu memberi terlebih dahulu

https://github.com/Autodesk/react-base-table lihat ini

GitHub

Autodesk / react-base-table

Komponen tabel reaksi untuk menampilkan kumpulan data besar dengan kinerja dan fleksibilitas tinggi - Autodesk / react-base-table

Prihatin ... Bisnis perlu menampilkan 1000 baris data.

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

Mungkin kita harus membuat ini built-in.

ada kemajuan lebih lanjut?

Saya mencoba membuat TimePicker dengan Input dan Dropdown, jadi saya perlu membuat 1440 item (24 jam * 60 menit) di overlay Dropdown dengan Menu, karena Dropdown tidak berfungsi dengan komponen lain.

Tetapi kinerja dropdown dengan jumlah data ini sangat buruk.

Jadi, pertanyaan saya adalah: Apa yang dapat saya lakukan untuk menggunakan react-window sebagai dropdown overlay?

Ingin menyebarkan kekhawatiran saya di sini juga. Kami telah mencoba merender dropdown pilih untuk daftar dengan daftar lengkap Taksonomi Produk Google tetapi sangat lambat dengan beberapa detik tertinggal sebelum saya dapat melihat dropdown. Apa kemajuannya sejauh ini?

Saya ingin tahu apakah ada solusi sekarang?
Saya ingin menggunakan react-virtualized di Autocomplete, tetapi saya tidak dapat menggunakannya. Saat saya mengembalikankomponen dalam metode rowRenderer Daftar, saya mendapatkan kesalahan.

@jingxiawl Salah satu solusinya adalah menjadikan dropdown sebagai dropdown berbasis pencarian. Dari perspektif yang berbeda, tidak terlalu ramah pengguna untuk menampilkan daftar panjang item bagi pengguna untuk menggulir ke bawah juga secara manual, jadi saya menggunakan status untuk mengelola daftar pilihan dropdown dengan menyaring frase pencarian. Jika Anda menggunakan React hooks, Anda dapat menggunakan useEffect untuk meminimalkan rendering ulang komponen.

Semoga ini mengurangi rasa sakit rendering lambat. Meski demikian saya tetap berharap komponen ini tidak melambat karena daftar pilihan yang lebih panjang.

@yoonaiyan
Terima kasih. Tetapi sekarang masalahnya adalah ada banyak data yang disaring, dan akan selalu ada masalah dengan daftar yang panjang.

@yoonwaiyan, apakah Anda memiliki contoh untuk melakukan ini?

antd.Table tabel virtual, API sepenuhnya konsisten dengan Tabel asli, tidak perlu melewati rowHeight
https://github.com/ctq123/ant-virtual-table

@reconbot Ini adalah contoh sederhana yang saya lakukan dengan menggunakan React hooks.

Berdasarkan jendela reaksi, komponen bentuk yang berfungsi penuh
https://github.com/nexxLuo/tablex

@reconbot Ini adalah contoh sederhana yang saya lakukan dengan menggunakan React hooks.

Masih sangat lambat bagiku.

@douglasjunior yup ini tidak dimaksudkan untuk menyelesaikan masalah sepenuhnya tetapi lebih merupakan solusi sementara untuk kode produksi saya untuk setidaknya tidak memberikan pengalaman pemuatan yang buruk kepada pengguna, tetapi saya terbuka untuk saran tentang cara mengoptimalkannya lebih lanjut.

Anda dapat merujuk ke ant-virtual-table yang ditautkan pada beberapa utas di atas untuk melihat bagaimana mereka memecahkan masalah ini untuk tabel seperti yang mereka klaim.

btw posting SO ini memiliki beberapa solusi yang sah untuk masalah daftar panjang, semoga tim antd dapat melihatnya: https://stackoverflow.com/questions/38033442/big-list-performance-with-react

Halo Tim Semut
Apakah ada berita tentang masalah ini? ada rencana untuk memperbaikinya dalam waktu dekat? sebenarnya sangat menyakitkan untuk menggunakan tabel daftar saat memiliki banyak data
@fachrizal
Kerja bagus !!!

Halo Tim Semut
Saya menggunakan komponen Tree dengan lazy loading, dan saya memiliki sekitar 20.000 TreeNodes sebagai anak di bawah TreeNode . Sangat lambat dan menyakitkan untuk menavigasi melalui pohon dengan sejumlah besar data. Ada kabar baru tentang masalah ini?

Halo Tim Semut,
Cinta pertama suka komponen antd.
Saya menggunakan komponen Select dan benar-benar perlu menambahkan react-window atau cara lain untuk mengoptimalkannya, karena ada lebih dari 2000 opsi yang membuat komponen sangat lambat. Tolong beritahu saya jika Anda memiliki pembaruan tentang ini.

Bisakah kita menggunakan ini untuk referensi? Repositori ini memiliki banyak sekali informasi penting untuk komponen Tabel.

https://github.com/wubostc/virtualized-table-for-antd

SuperSelect didasarkan pada antd Select, yang mendukung daftar virtual puluhan ribu data, api yang sama dengan antd Select, yang berfungsi dengan baik dalam proyek saya.

sekarang, SuperSelect pindah ke antd-virtual-select

antd-virtual-pilih repo

ini demo

Hal keren @iblq! Saya membuat sedikit modifikasi pada demo Anda untuk menyertakan perbandingan dengan semut pilih https://codesandbox.io/s/superselect-8xlwk

Halo Tim Semut,
Cinta pertama suka komponen antd.
Saya menggunakan komponen Select dan benar-benar perlu menambahkan react-window atau cara lain untuk mengoptimalkannya, karena ada lebih dari 2000 opsi yang membuat komponen sangat lambat. Tolong beritahu saya jika Anda memiliki pembaruan tentang ini.

https://github.com/react-component/select versi alpha sudah mengimplementasikan virtual scroll.
Anda hanya perlu menunggu antd 4.0 untuk memilikinya.

@megaw lmao apa. Apakah kita mengikuti utas yang sama? Di mana ada orang yang menawarkan untuk mempekerjakan Anda?

Kurasa aku harus menunggu 4.0 ⌚️

Demo SuperSelect atas cukup mengagumkan, ngl. Sangat berkinerja juga. Sayangnya, saya tidak ingin menyalin-tempel 300+ baris untuk mendapatkan performa Select , terutama karena saya menggunakan TypeScript dan ada di JS. Masih cukup keren!

Saya berharap react-window tidak hanya terbatas pada daftar ...

Pilihan lainnya adalah react-virtualized-select , tetapi ada dua masalah: 1) Bukan Ant 😄, 2) Ini tidak lagi dipertahankan, jadi jika Anda mengalami masalah,

Bagi siapa pun yang bertanya-tanya, satu solusi untuk ini untuk data non-dropdown / pilih adalah komponen List dengan opsional pagination prop. Bekerja seperti pesona!

LazySelectInput harus menangani pemuatan> 2000 tanpa masalah rendering apa pun.

Komponen Tabel baru juga menerapkan daftar virtual, lihat https://github.com/react-component/table/releases/tag/v7.0.0-alpha.16

@abenhamdine Adakah cara agar kita dapat menggunakan komponen tabel baru untuk dukungan virtualisasi dengan proyek desain semut yang ada?

@abenhamdine Adakah cara agar kita dapat menggunakan komponen tabel baru untuk dukungan virtualisasi dengan proyek desain semut yang ada?

Mungkin, tapi IMHO lebih baik menunggu antd 4.0, komponen tabel baru sudah terintegrasi di 4.0 menyiapkan cabang.

Kemarin saya mencoba menambahkan versi alfa tetapi tidak berhasil.

Baiklah, kalau begitu saya akan menggunakan yang ini untuk saat ini.

https://github.com/wubostc/virtualized-table-for-antd

Agak berantakan dok, saya juga perlu sedikit memperbaiki cssnya.

Adakah cara agar kita dapat menggunakan komponen select baru di v3 sambil menunggu v4? Atau adakah komponen pilihan pihak ketiga yang menerapkan daftar virtual dan dengan gaya antd yang sama?

EDIT.
Saya menggunakan komponen SuperSelect yang diposting di atas dan berfungsi dengan sempurna

perubahan apapun ?

@ shivam-ahuja Anda dapat mencoba Pilih komponen di antd 4, 4.0.0-rc1 keluar.
Lihat https://next.ant.design/components/select/#components -select-demo-big-data

Apakah pemfilteran tabel telah bekerja? Saya masih mengalami waktu muat yang lama saat memfilter kumpulan besar data seperti yang terlihat di # 11331. Pemfilteran cukup banyak tidak dapat digunakan dengan tabel yang memiliki lebih dari 1k item.

Perfermance render daftar panjang telah dioptimalkan di v4: https://github.com/ant-design/ant-design/issues/21656