Kuasai Senarai dan Kunci React
Memaparkan senarai dalam React adalah mudah, tetapi melakukannya dengan betul adalah sukar.
Ramai pembangun menggunakan indeks tatasusunan sebagai kunci. Ini adalah satu kesilapan. Ia mengakibatkan pepijat dan prestasi yang perlahan.
Berikut adalah cara anda sepatutnya mengendalikan data dinamik dalam React.
Bagaimana React Menggunakan Senarai
React menggunakan kaedah map() untuk menukarkan tatasusunan kepada elemen UI. Apabila anda menggunakan map(), React menukarkan setiap bahagian data kepada komponen.
Peranan Kunci React menggunakan Virtual DOM. Apabila data berubah, React membandingkan data baharu dengan data lama. Proses ini dipanggil reconciliation.
Kunci bertindak sebagai pengenal pasti unik. Ia memberitahu React dengan tepat item mana yang berubah, beralih, atau dipadamkan.
Mengapa Menggunakan Indeks sebagai Kunci adalah Berbahaya Menggunakan indeks (0, 1, 2...) sebagai kunci menyebabkan tiga masalah utama:
- Ralat Keadaan Komponen: Jika anda menyusun senarai, medan input atau kotak semak mungkin memaparkan data daripada item yang salah.
- Penurunan Prestasi: React tidak dapat menjejaki item mana yang mana. Ia sering melakukan re-render pada keseluruhan senarai dan bukannya hanya satu item.
- Pepijat Visual: UI anda mungkin kelihatan betul, tetapi logik dalaman akan gagal apabila item beralih.
Cara yang Betul untuk Menggunakan Kunci Untuk memastikan aplikasi anda pantas dan stabil, ikut peraturan ini:
- Gunakan ID Unik: Sentiasa gunakan ID daripada pangkalan data anda (seperti UUID atau kunci utama).
- Jangan Pernah Gunakan
Math.random(): Menjana kunci semasa render menyebabkan React membina semula setiap elemen pada setiap kemas kini. Ini menjejaskan prestasi. - Kekalkan Kunci yang Stabil: Kunci mestilah kekal sama untuk bahagian data yang sama sepanjang kitaran hayatnya.
Perbandingan Ringkas
| Ciri | Kestabilan |
|---|---|
| Menggunakan Indeks | Tidak Stabil |
| Menggunakan ID Unik | Sangat Stabil |
| Ciri | Prestasi |
|---|---|
| Menggunakan Indeks | Lemah |
| Menggunakan ID Unik | Optimum |
| Ciri | Keselamatan State |
|---|---|
| Menggunakan Indeks | Tidak Selamat |
| Menggunakan ID Unik | 100% Selamat |
Ringkasan untuk Pembangun
Gunakan kaedah map(). Berikan ID yang unik dan stabil kepada prop key. Elakkan penggunaan indeks tatasusunan untuk mana-mana senarai yang boleh berubah, disusun, atau ditapis.