Mengapa Anda Perlu Mengelak Fungsi Anak Panah atau Mengikat dalam JSX Props?

Mengapa Menggunakan Fungsi Anak Panah atau Bind dalam JSX Props adalah Tidak-Tidak

Apabila menggunakan React, adalah penting untuk mengelak daripada menggunakan fungsi anak panah atau mengikat dalam prop JSX. Amalan ini boleh membawa kepada isu prestasi dan tingkah laku yang salah.

Kecelakaan Prestasi

Menggunakan fungsi anak panah atau mengikat dalam prop JSX memaksa fungsi ini dicipta semula pada setiap pemaparan. Ini bermakna:

• Fungsi lama dibuang, mencetuskan kutipan sampah.
• Penyampaian berterusan banyak elemen boleh mengakibatkan kegelisahan prestasi.
• Komponen yang bergantung pada PureComponents atau shouldComponentUpdate masih mencetuskan penyampaian semula kerana prop fungsi anak panah yang berubah.

Gelagat Salah

Pertimbangkan contoh berikut:

onClick={() => this.handleDelete(tile)}

Kod ini akan mencipta fungsi baharu pada setiap pemaparan, menyebabkan React menandai komponen sebagai kotor dan mencetuskan penyampaian semula. Walaupun prop jubin tidak berubah, komponen akan dipaparkan semula kerana fungsi anak panah berbeza.

Amalan Terbaik

Untuk mengelakkan perangkap ini, gunakan mengikuti amalan terbaik:

• Ikat pengendali acara dalam pembina:

constructor(props) {
  super(props);
  this.handleDelete = this.handleDelete.bind(this);
}

• Buat fungsi anak panah di luar kaedah pemaparan:

const handleDelete = tile => {
  // Handle delete logic
};

Nota Tambahan:

Adalah penting untuk ambil perhatian bahawa fungsi anak panah adalah baik apabila digunakan di bahagian lain komponen, seperti dalam kaedah render. Walau bagaimanapun, perkara ini harus dielakkan apabila memberikan pengendali acara kepada prop JSX.

Atas ialah kandungan terperinci Mengapa Anda Perlu Mengelak Fungsi Anak Panah atau Mengikat dalam JSX Props?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!