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

Elakkan Menggunakan Fungsi Anak Panah atau Bind dalam JSX Props

Mengapa Ini Amalan Buruk:

Menggunakan fungsi anak panah atau mengikat dalam prop JSX adalah tidak digalakkan kerana ia memberi kesan negatif kepada prestasi. Inilah sebabnya:

• Pengumpulan Sampah Tidak Cekap: Mencipta fungsi pada setiap pemaparan mencetuskan kutipan sampah yang tidak perlu apabila komponen dinyahlekapkan.
• Membawa Semula Disebabkan Perbandingan Cetek: PureComponents dan komponen menggunakan shallowCompare dalam shouldComponentUpdate() render walaupun nilai prop kekal tidak berubah, kerana prop fungsi sebaris dicipta semula setiap kali.

Contoh:

Tanpa Fungsi Anak Panah Sebaris:

<Button onClick={() => console.log('clicked')} />

Butang tidak akan dipaparkan semula melainkan propnya yang lain berubah.

Dengan Anak Panah Sebaris Fungsi:

<Button onClick={this.handleClick} />

Butang akan dipaparkan semula setiap kali komponen dipaparkan, walaupun pengendali kekal sama.

Amalan Terbaik:

Untuk mengelakkan isu prestasi ini, isytiharkan fungsi anak panah atau kaedah terikat di luar JSX:

class Button extends React.Component {
  handleClick = () => {
    // Handler logic
  };

  render() {
    return <button onClick={this.handleClick} />;
  }
}

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