React-window: Mengubah alat peraga dari satu item akan memperbarui seluruh daftar

Saya memiliki kasus dan masalah penggunaan yang sama persis, dan belum dapat menemukan solusi ...

Itu karena mengubah item membuat array items yang membuat objek itemData . Penting bahwa teknik memoization tidak valid kemudian datanya berubah.

Jika Anda ingin barang yang lebih kuat semacam ini perubahan, Anda bisa menerapkan sendiri Anda areEqual fungsi (atau shouldComponentUpdate ).

Tujuan demo hanya untuk menunjukkan bagaimana itemData dan memoization dapat bekerja sama untuk menyampaikan nilai yang kompleks.

Saya telah mengujinya dengan fungsi shouldComponentUpdate saya sendiri tetapi fungsi ini tidak akan dijalankan, jika komponen akan di-umount lagi dan lagi

jika komponen akan di-umount berulang kali

Tidak ada cara untuk membuat memo komponen yang dilepas. Bukan itu yang terjadi di demo saya. Jika itu yang terjadi di aplikasi Anda, ada hal lain yang sedang terjadi– dan saya tidak bisa berspekulasi tentang apa.

@BertelBB Apakah Anda menemukan solusi?

@ffjanhoeck Tidak juga, tidak. Saya menyadari bahwa kasus penggunaan saya sebenarnya sedikit berbeda dalam arti bahwa daftar saya juga dapat diurutkan / difilter. Apa yang saya lakukan adalah saya lulus dalam ItemData dan ItemKey alat peraga sehingga saya secara manual mengatur prop kunci untuk setiap item. Seluruh daftar masih diperbarui tetapi tidak selambat sebelumnya.
https://react-window.now.sh/#/api/FixedSizeList di sini Anda dapat membaca tentang props yang saya maksud.

@BertelBB Saya sudah mengimplementasikan fungsi itu kemarin, terima kasih :)
Tapi masalahnya belum diperbaiki :(
Ini adalah GIF yang lamban - seperti yang Anda lihat, perlu beberapa milidetik untuk memeriksa item.
Semuanya memoized atau harus menerapkan shouldComponentUpdate.

@ffjanhoeck Ya, memiliki masalah yang sama. Sayangnya saya tidak punya waktu untuk melihat lebih jauh tentang ini seperti sekarang. Tetapi saya akan memberi tahu Anda jika saya menemukan solusi yang lebih baik :)

@ffjanhoeck Adakah kesempatan saya dapat melihat aplikasi yang Anda tunjukkan di GIF di atas? Saya ingin sekali menjalankan profiler dan melihat dari mana datangnya kelambatan.

@bvaughn Ya tentu - Saya telah mengirimkan kredensial di email Anda! :)

Saya pikir kelambatan berasal dari pratinjau singkat suatu item (Gambar dan teks biru dengan teks sekunder mewakili Komponen EntityShortPreview). Tapi itu bukan masalah untuk satu item. Masalahnya adalah bahwa semua item dilepas dan dipasang di select dan jika Anda menjumlahkan ini, maka itu lambat.

Itulah perasaan saya saat ini: D Tapi mungkin Anda dapat menemukan beberapa masalah lain :)

Ini terjadi jika pengguna memilih satu item

@ffjanhoeck Saya mengalami masalah yang sama persis, dan setelah beberapa penyelidikan, saya berhasil menemukan penyebabnya: itu karena kami menggunakan fungsi anonim sebagai penyaji item, bukan komponen bernama. Saya bukan ahli React, tapi saya yakin ini mengacaukan rekonsiliasi React, karena komponennya tidak bisa dikenali sama di antara render.

Saya membuat contoh CodeSandbox yang menggambarkan masalah di sini: https://codesandbox.io/s/qx4088mn36

Saya yakin ini juga terkait dengan percakapan di sini: https://github.com/bvaughn/react-window/issues/85#issuecomment -436329610

Itulah yang saya lihat juga setelah melihat sekilas pagi ini. (Sedang menulis email tetapi terputus.) Memindahkan fungsi inline ke sebuah instance prop mempercepat segalanya, (tetapi juga merusak beberapa hal lain yang saya tidak punya waktu untuk melacak karena ukuran kasus repro).

Saya yakin ini mengacaukan rekonsiliasi React, karena komponennya tidak bisa dikenali sama di antara render.

Ini benar. 👍

Hmm. Ini sangat disayangkan, karena saya menulis proyek saya menggunakan ReasonReact, yang (saat ini) tidak memiliki alat peraga yang diperlukan untuk menyebarkan / fitur komponen fungsional untuk menghindari masalah ini. Saya menyadari bahwa ini sama sekali bukan masalah dengan react-window, hanya batasan sistem tipe ReasonML, tetapi saya kira itu layak disebutkan jika ada orang lain yang tersandung pada utas ini.

Untuk lebih jelasnya, inilah mengapa semua contoh dokumen menunjukkan render item yang didefinisikan di luar komponen induk, dan contoh memoisasi menunjukkan bagaimana membagi data di antara keduanya. (Pada dasarnya ini seperti bobot yang lebih ringan, konteks bawaan.)

Bagus, saya akan melihatnya! :)

Solusi Anda memperbaiki Masalah! Terima kasih dan semoga harimu menyenangkan