Apakah kegunaan kunci tindak balas?

Fungsi kunci dalam tindak balas adalah untuk menentukan sama ada elemen itu baru dicipta atau dialihkan dalam algoritma diff, dengan itu mengurangkan perbezaan yang tidak perlu, iaitu, untuk meningkatkan kecekapan perbandingan rakan sebaya diff dan mengelakkan in-situ A kesan sampingan penggunaan semula kunci ialah pengecam yang digunakan oleh tindak balas untuk menjejaki sama ada elemen senarai telah diubah suai, ditambah atau dipadamkan.

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

Apakah kegunaan kunci react

Fungsi

Seperti Vue, React juga mempunyai algoritma diff dan peranan atribut kunci elemen adalah untuk Menentukan sama ada elemen itu baru dicipta atau dialihkan, dengan itu mengurangkan Diff yang tidak perlu

Dalam algoritma diff react, bertindak balas akan menggunakan kunci elemen untuk menentukan sama ada elemen itu baru dicipta atau dipindahkan , dengan itu mengurangkan yang tidak diperlukan rendering elemen. Di samping itu, bertindak balas juga menentukan hubungan antara elemen dan keadaan tempatan berdasarkan kunci

Ringkasnya, ia adalah untuk meningkatkan kecekapan perbandingan peer diff dan mengelakkan kesan sampingan yang disebabkan oleh in- gunakan semula situ -strategi kemas kini bawah, setiap perubahan kecil akan menghasilkan vdom baharu untuk perbezaan Jika kunci tidak ditulis, ia akan dikemas kini tetapi tidak dikemas kini

Apakah kuncinya? >

kunci ialah penunjuk tambahan yang digunakan dengan bertindak balas untuk menjejak elemen senarai yang telah diubah suai, ditambah atau dipadamkan. Semasa proses pembangunan, kita perlu memastikan bahawa kunci sesuatu elemen adalah unik di kalangan elemen adik-beradiknya.

Jika data senarai sedang diberikan dan sekeping data dimasukkan selepas data, kunci tidak akan memainkan peranan besar, seperti berikut:

Elemen sebelumnya berada dalam algoritma diff. Memandangkan elemen sebelumnya sepenuhnya Begitu juga, operasi pemadaman dan penciptaan tidak akan berlaku Semasa perbandingan terakhir, ia perlu dimasukkan ke dalam pepohon DOM baharu

Oleh itu, dalam kes ini, ia tidak berlaku. sangat bermakna sama ada elemen itu mempunyai atribut kunci atau tidak

Mari kita lihat perbezaan antara menggunakan kunci dan tidak menggunakan kunci semasa memasukkan data lebih awal:

this.state = {
    numbers:[111,222,333]
}
 
insertMovie() {
  const newMovies = [...this.state.numbers, 444];
  this.setState({
    movies: newMovies
  })
}
 
<ul>
    {
        this.state.movies.map((item, index) => {
            return <li>{item}</li>
        })
    }
</ul>

Apabila anda mempunyai kunci, bertindak balas sepadan dengan pokok asal berdasarkan atribut kunci Untuk elemen kanak-kanak dan elemen kanak-kanak pada pokok terkini, seperti situasi di atas, anda hanya perlu memasukkan elemen 000 ke kedudukan hadapan

Apabila terdapat. tiada kunci, semua teg li perlu diubah suai

Begitu juga, ini tidak bermakna mempunyai nilai kunci bermakna prestasi yang lebih tinggi Jika hanya kandungan teks telah berubah, tidak menulis kunci akan menghasilkan prestasi dan kecekapan yang lebih tinggi

insertMovie() {
  const newMovies = [000 ,...this.state.numbers];
  this.setState({
    movies: newMovies
  })
}

Terutamanya kerana tidak menulis kunci bermakna menggantikan semua kandungan teks, nod Tidak akan ada perubahan

Kekunci penulisan melibatkan penambahan dan pemadaman nod Jika kunci lama tidak wujud lagi, ia akan berlaku akan dipadamkan. Jika kunci baharu tidak wujud sebelum ini, ia akan dimasukkan, yang meningkatkan prestasi overhed

Ringkasan

Penggunaan atribut utama yang baik adalah langkah yang sangat kritikal dalam pengoptimuman prestasi. Nota ialah:

kunci harus unikJangan gunakan nilai rawak untuk kunci (nombor rawak akan menjana semula nombor pada kali berikutnya ia diberikan)

Elakkan menggunakan indeks sebagai kunci

Proses pertimbangan utama bertindak balas adalah seperti berikut:

Pembelajaran yang disyorkan: "

tutorial video bertindak balas

"

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