Mengapa Anak Panah Berfungsi dan Mengikat Menyebabkan Isu Prestasi dalam JSX Props?

Elakkan Fungsi Anak Panah dan Ikat dalam JSX Props untuk Prestasi Optimum

Alat lint React bertujuan untuk meningkatkan amalan kod dengan menyerlahkan isu yang berpotensi. Satu mesej ralat biasa ialah "Prop JSX tidak boleh menggunakan fungsi anak panah." Ini menunjukkan kesan buruk menggunakan fungsi anak panah atau mengikat dalam prop JSX.

Mengapa Fungsi Anak Panah dan Prestasi Menghalang Pengikat

Menggabungkan fungsi anak panah atau mengikat ke dalam prop JSX mempunyai implikasi prestasi:

• Pengumpulan Sampah: Setiap kali fungsi anak panah dicipta, fungsi sebelumnya dibuang. Jika berbilang elemen dipaparkan dengan fungsi sebaris, ia boleh membawa kepada animasi berombak.
• Perenderan Semula: Fungsi anak panah sebaris mengganggu mekanisme perbandingan cetek yang digunakan oleh PureComponents dan komponen yang menggunakan kaedah shouldComponentUpdate. Memandangkan prop fungsi anak panah dicipta semula setiap kali, ia dikesan sebagai perubahan prop, mencetuskan penyampaian semula yang tidak perlu.

Kesan Pengendali Sebaris terhadap Perenderan Semula

Pertimbangkan contoh berikut:

Contoh 1: PureComponent tanpa Pengendali Sebaris

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    console.log('render button');
    return <button onClick={onClick}>Click</button>;
  }
}

Dalam kod ini, komponen Button hanya dipaparkan semula apabila propnya berubah, seperti yang dijangkakan untuk PureComponent .

Contoh 2: PureComponent dengan Pengendali Sebaris

const Button = (props) => {
  console.log('render button');
  return <button onClick={() => props.onClick()}>Click</button>;
};

Disebabkan oleh fungsi anak panah sebaris, Button kini dipaparkan semula setiap kali, walaupun keadaan komponen kekal tidak berubah. Penyampaian semula yang tidak perlu ini boleh memberi kesan ketara kepada prestasi.

Amalan Terbaik

Untuk mengelakkan isu prestasi ini, adalah disyorkan untuk mematuhi amalan terbaik berikut:

• Tentukan pengendali acara anda di luar JSX: Ekstrak fungsi anak panah atau kaedah ikat ke dalam pengisytiharan pembolehubah yang berasingan.
• Gunakan pengikatan ini: Untuk komponen kelas, ikat acara pengendali ini dalam pembina.
• Gunakan fungsi tertib lebih tinggi: Pertimbangkan untuk menggunakan fungsi tertib tinggi seperti map atau bindActionCreators untuk pengendalian acara yang lebih cekap dalam JSX.

Atas ialah kandungan terperinci Mengapa Anak Panah Berfungsi dan Mengikat Menyebabkan Isu Prestasi dalam JSX Props?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!