Apakah kegunaan kunci dalam tindak balas

Sebagai tindak balas, kunci digunakan untuk mengenal pasti komponen yang telah berubah apabila elemen tertentu dalam DOM ditambah atau dipadamkan pada kunci. Kemas kini komponen Jika kunci adalah sama dan komponen berubah, hanya sifat komponen yang sepadan akan dikemas kini.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah kegunaan key in react?

Ringkasnya, react menggunakan kunci untuk mengenal pasti komponen Ia adalah pengecam identiti, sama seperti kad ID kami digunakan untuk mengenal pasti seseorang . Setiap kunci sepadan dengan komponen React menganggap kunci yang sama sebagai komponen yang sama, jadi komponen berikutnya yang sepadan dengan kunci yang sama tidak akan dibuat.

Kunci boleh membantu React mengenal pasti elemen yang telah berubah apabila elemen tertentu dalam DOM ditambah atau dipadamkan. Oleh itu anda harus memberikan setiap elemen dalam tatasusunan identiti tertentu.

Algoritma diff React menganggap kunci sebagai ID unik dan kemudian membandingkan nilai komponen untuk menentukan sama ada ia perlu dikemas kini Oleh itu, jika tiada kunci, React tidak akan tahu cara mengemas kini komponen .

Anda boleh menggunakannya tanpa menghantar kekunci kerana tindak balas mengesan bahawa subkomponen tidak mempunyai kunci dan akan menggunakan indeks tatasusunan sebagai kunci secara lalai.

React memutuskan sama ada untuk memusnahkan, mencipta semula atau mengemas kini komponen berdasarkan kekunci Prinsipnya ialah:

• Jika kunci adalah sama dan komponen berubah. , React hanya akan mengemas kini komponen yang sepadan dengan sifat perubahan. Jika kunci

• berbeza, komponen akan memusnahkan komponen sebelumnya dan memaparkan semula keseluruhan komponen.

Senario penggunaan kunci

Dalam pembangunan projek, senario penggunaan atribut utama yang paling biasa ialah subkomponen yang dicipta secara dinamik daripada tatasusunan dan setiap subkomponen perlu menjadi Tambah nilai atribut kunci yang unik. Sesetengah orang secara semula jadi akan berfikir bahawa nilai kunci adalah sangat hampir dengan kedudukan indeks yang diperolehi oleh sub-elemen yang dipaparkan secara dinamik. Bukankah boleh menggunakan indeks secara langsung untuk melampirkan nilai kunci?

Contohnya:

{dataList.map((item,index)=>{
    return <div style={mystyle} key={index}>{item.name}</div>
    })
}

Selepas anda mencubanya, anda akan mendapati bahawa ralat telah hilang dan renderingnya tiada masalah, bukankah itu perkara biasa? ! Walau bagaimanapun, adalah sangat tidak disyorkan untuk menggunakan indeks tatasusunan sebagai kunci.

Jika kemas kini data hanyalah tatasusunan yang menyusun semula atau memasukkan elemen baharu di tengah, elemen paparan akan dipaparkan semula.

Contohnya:

Selepas elemen dengan index=2 dialihkan ke hadapan, kunci elemen juga berubah Kemudian Kunci yang akan berubah dengan cara ini tidak mempunyai makna seperti "kad pengenalan", jadi tiada ruang untuk kehilangan. Sudah tentu, apabila anda menggunakan nilai utama untuk mencipta subkomponen, jika kandungan tatasusunan hanya untuk paparan tulen dan tidak melibatkan perubahan dinamik dalam tatasusunan, anda sebenarnya boleh menggunakan indeks sebagai kunci.

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Apakah kegunaan kunci dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!