React: Daftar item dengan `kunci` unik dirender ulang saat urutan item berubah.

Dibuat pada 15 Jul 2018 · 3Komentar · Sumber: facebook/react

Apakah Anda ingin meminta fitur atau melaporkan bug ?
Serangga

Apa perilaku saat ini?
Saat merender daftar item dengan key ditetapkan sebagai properti unik pada setiap elemen item, jika urutan item berubah dari render sebelumnya, elemen item yang indeksnya diubah akan dirender ulang (contoh baru dibuat) alih-alih dibuat ulang -menggunakan instance yang ada (dipetakan melalui kunci).

Misalnya https://codesandbox.io/s/r5p48kzop
Merender daftar boxes dengan setiap kotak memiliki id , top , left & color props. Setiap 750ms kami memperbarui nilai ( top , left ) untuk semua elemen di dalam array boxes .

Saat memperbarui jika urutan elemen tidak berubah maka setiap kotak dianimasikan ke posisi barunya. Namun jika kita menghapus komentar pada baris 31 yang mengocok kotak, maka hanya elemen yang mempertahankan posisinya dari render sebelumnya yang dianimasikan ke posisi baru.

Anda dapat mengamati perilaku ini di kotak pasir. Dengan _shuffle aktif terkadang kotak melompat ke posisi barunya sementara dengan diskon _shuffle mereka selalu bernyawa.

Jika perilaku saat ini adalah bug, berikan langkah-langkah untuk mereproduksi dan jika mungkin demo minimal dari masalah tersebut. Tempel tautan ke contoh JSFiddle (https://jsfiddle.net/Luktwrdm/) atau CodeSandbox (https://codesandbox.io/s/new) Anda di bawah ini:
https://codesandbox.io/s/r5p48kzop

Apa perilaku yang diharapkan?
Terlepas dari urutan boxes semua elemen kotak harus dianimasikan ke posisi barunya karena mereka memiliki properti unik key ditetapkan.

Versi React yang mana, dan browser/OS mana yang terpengaruh oleh masalah ini?
Bereaksi 16.3.2 & 16.4.1 , Chrome, MacOS.

Sumber

dhruvparmar372

Komentar yang paling membantu

Hai @dhruvparmar372!

Ini tampaknya menjadi batasan DOM. Untuk mendemonstrasikan ini, saya membuat JSFiddle ini yang mengubah urutan dua node DOM dan kemudian menerapkan kelas untuk memicu transisi.

Ternyata, Anda dapat mengatasi masalah ini dengan memicu reflow antara mengubah urutan dan memperbarui properti animasi.

Saya menambahkan sedikit kode ke CodeSandbox Anda membuatnya terlihat ketika komponen dibuat ulang oleh React dengan mengubah <Box /> menjadi komponen kelas dan membuat id unik di konstruktor. Seperti yang Anda lihat, id akan tetap konsisten: https://codesandbox.io/s/jn42wvl343

Selain itu, saya menerapkan solusi reflow ke contoh Anda dengan membagi pembaruan menjadi dua setState s. Yang pertama akan mengubah urutan, lalu kita memicu reflow, dan setelah itu mengubah posisi. Ini tampaknya berfungsi dengan baik di Chrome, Firefox, Safari, dan Edge (CodeSandbox tidak mendukung IE11 jadi saya tidak dapat menguji pada browser itu).

philipp-spiess pada 15 Jul 2018

👍3

Semua 3 komentar

Hai @dhruvparmar372!

Ini tampaknya menjadi batasan DOM. Untuk mendemonstrasikan ini, saya membuat JSFiddle ini yang mengubah urutan dua node DOM dan kemudian menerapkan kelas untuk memicu transisi.

Ternyata, Anda dapat mengatasi masalah ini dengan memicu reflow antara mengubah urutan dan memperbarui properti animasi.

philipp-spiess pada 15 Jul 2018

👍3

hai @philipp-spiess terima kasih telah mengklarifikasi masalah dan contoh untuk solusinya.

dhruvparmar372 pada 15 Jul 2018

Hai, @philipp-spiess

Saya memiliki masalah yang sama dengan daftar penyortiran
Sayangnya, contoh Codesandbox Anda di atas tidak berfungsi lagi (

Berikut ini contohnya:
https://jsfiddle.net/9odLvbrx/
Ini mengurutkan item saat diklik dengan transisi CSS sederhana.
Masalahnya adalah transisi hanya muncul pada item yang dipilih dan menghilangkan sisanya.

Saya tahu cara mengatasi masalah ini (dikomentari dalam kode) tetapi itu berfungsi dengan baik hanya pada daftar yang kuantitas itemnya tidak pernah berubah. Jadi Jika saya ingin menambah atau menghapus item - hal-hal menjadi sangat kompleks. Bagaimana saya bisa menggunakan solusi kelebihan reflow Anda untuk mewujudkannya dalam contoh saya?

Terima kasih sebelumnya! 😊