Mengapa Fungsi Arrow dan mengikat dalam React's Render Bermasalah

(Petunjuk: Ia menjadikan seharusnyaComponentUpdate dan PureComponent rewel)

Dalam catatan sebelumnya, saya menerangkan cara mengekstrak komponen anak React agar tidak menggunakan fungsi mengikat atau anak panah dalam membuat. Tetapi saya tidak memberikan demo yang jelas untuk menunjukkan mengapa ini berguna.

Inilah contoh ringkas.

Dalam contoh ini, saya menggunakan fungsi anak panah dalam membuat untuk mengikat ID pengguna yang berkaitan dengan setiap butang hapus.

Pada baris 35, saya menggunakan fungsi anak panah untuk menyampaikan nilai ke fungsi deleteUser. Itu masalah.

Untuk mengetahui sebabnya, lihat User.js (klik ikon hamburger di kiri atas untuk memilih fail yang berbeza dalam contoh). Saya log masuk ke konsol setiap kali render dipanggil. Saya telah menyatakan Pengguna sebagai PureComponent. Oleh itu Pengguna hanya perlu membuat semula apabila alat peraga atau keadaan berubah. Tetapi apabila anda mengklik delete untuk pengguna, perhatikan bahawa render dipanggil untuk semua contoh Pengguna .

Inilah sebabnya: Komponen induk menurunkan fungsi anak panah pada alat peraga. Fungsi panah dialokasikan semula pada setiap render (cerita yang sama dengan penggunaan bind). Oleh itu, walaupun saya telah menyatakan User.js sebagai PureComponent, fungsi anak panah pada induk Pengguna menyebabkan komponen Pengguna dapat melihat fungsi baru dihantar pada alat peraga untuk semua pengguna. Supaya setiap pengguna semula menyebabkan apabila mana-mana butang padam diklik. ?

Ringkasan:

Elakkan fungsi anak panah dan ikatan pada render. Ia memecahkan pengoptimuman prestasi seperti seharusnyaComponentUpdate dan PureComponent.

Apa Yang Perlu Saya Lakukan?

Sebaliknya, berikut adalah contoh yang tidak menggunakan fungsi anak panah dalam membuat.

Dalam contoh ini, index.js tidak mempunyai fungsi anak panah dalam render. Sebaliknya, data yang berkaitan diturunkan ke User.js. Dalam User.js, onDeleteClick memanggil fungsi onClick yang diserahkan pada alat peraga dengan pengguna yang berkenaan.id.

Dengan perubahan ini, apabila anda mengklik hapus, perhatikan bahawa perenderan tidak dipanggil untuk Pengguna lain! ?

Ringkasan

Untuk prestasi yang optimum,

  1. Elakkan fungsi anak panah dan ikat pada render.
  2. Bagaimana? Ekstrak komponen anak, atau lulus data pada elemen HTML.

Mencari Lebih Banyak mengenai React? ⚛️

Saya telah mengarang banyak kursus React dan JavaScript di Pluralsight (percubaan percuma). Terbaru saya, "Menciptakan Reactable React Components" baru sahaja diterbitkan! ?

Cory House adalah pengarang pelbagai kursus mengenai JavaScript, React, clean code, .NET, dan banyak lagi mengenai Pluralsight. Dia adalah perunding utama di reactjsconsulting.com, seorang Arkitek Perisian di VinSolutions, Microsoft MVP, dan melatih pembangun perisian di peringkat antarabangsa mengenai amalan perisian seperti pembangunan front-end dan pengekodan bersih. Cory tweet mengenai JavaScript dan pengembangan front-end di Twitter sebagai @housecor.