React-window: useMemo di dalam komponen _row_ ketika induk merender ulang
Saya menemukan bahwa useMemo membantu menghindari (sepenuhnya) merender ulang semua baris saat daftar digulir dan saya ingin ini terjadi juga ketika komponen induk (yang menyimpan daftar) dirender ulang.
Demo:
https://codesandbox.io/s/v8k75vw0v0
Anda akan melihat bahwa saat Anda menggulir, pesan log Actual Row terjadi hanya ketika baris baru sedang dibangun.
Ini tidak terjadi ketika Anda mengklik tombol Rerender parent .
Sebaliknya FakeList dapat mengizinkan _row_ menggunakan useMemo dengan menggunakan _row_ sebagai fungsi alih-alih komponen.
Jadi saya kira ini lebih merupakan pertanyaan tentang bagaimana memanfaatkan sepenuhnya useMemo.
marian-c
Semua 3 komentar
Apakah Anda membaca bagian dokumen ini? https://react-window.now.sh/#/examples/list/memoized -list-items
Ada dua opsi memoisasi bawaan:
Sepertinya contoh Anda juga tidak menggunakan, yang akan menyebabkan rendering ulang yang tidak perlu karena cara react-window mengelola cache gayanya.
Saya yakin masalah ini tidak memerlukan perubahan apa pun dari perpustakaan ini, jadi saya akan menutupnya. Kami dapat berbicara lebih banyak jika Anda memiliki pertanyaan klarifikasi.
bvaughn
pada 19 Feb 2019
Halo lagi,
Contoh saya bukan yang paling fasih untuk apa yang saya coba ungkapkan, tetapi saya pikir saya bisa sekarang:
Mulai dari contoh Anda (memoized-list-items), selain hanya merender _baris_ yang akan terlihat, saya juga ingin meminimalkan render ketika Anda _mengaktifkan_ item (saat ini, ketika Anda mengklik item untuk mengaktifkannya , semua _baris_ dalam tampilan dirender ulang).
Saya akhirnya mencapai itu menggunakan prop itemData pada FixedSizeList (ini memungkinkan saya menghindari penutupan bersarang); ini pada gilirannya biarkan saya menggunakan useMemo .
Masalah ini harus tetap ditutup tetapi saya yakin ini adalah contoh / latihan pengoptimalan yang menarik dan saya akan menghargai masukan lebih lanjut dari Anda.
Hasilnya ada di sini: https://codesandbox.io/s/rr7w89w3q
Saya menghindari EXPENSIVE RENDER dengan biaya pembungkus: CHEAP PREP .
Terima kasih atas upaya yang Anda lakukan untuk perpustakaan ini.
marian-c
pada 19 Feb 2019
Ya, itu masuk akal. Jika itemData berubah, maka akan _secara sengaja_ merusak cache item. Dalam kebanyakan kasus, inilah yang ingin Anda lakukan untuk menghindari data basi. Jika Anda tahu bahwa ini tidak benar untuk kasus penggunaan tertentu, maka beberapa logika khusus seperti yang Anda lakukan tampaknya tepat. 👍
bvaughn
pada 19 Feb 2019
Masalah terkait
delateurj
·
3Komentar
lifeisaloha
·
3Komentar
carolin913
·
3Komentar
ivan-badmaev
·
3Komentar
maynir
·
4Komentar
Komentar yang paling membantu
Apakah Anda membaca bagian dokumen ini? https://react-window.now.sh/#/examples/list/memoized -list-items
Ada dua opsi memoisasi bawaan:
React.memoSepertinya contoh Anda juga tidak menggunakan, yang akan menyebabkan rendering ulang yang tidak perlu karena cara react-window mengelola cache gayanya.
Saya yakin masalah ini tidak memerlukan perubahan apa pun dari perpustakaan ini, jadi saya akan menutupnya. Kami dapat berbicara lebih banyak jika Anda memiliki pertanyaan klarifikasi.