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

Susan Sarandon
Lepaskan: 2024-11-06 21:49:02
asal
358 orang telah melayarinya

Why Should You Avoid Using Arrow Functions or Bind in 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')} />
Salin selepas log masuk

Butang tidak akan dipaparkan semula melainkan propnya yang lain berubah.

Dengan Anak Panah Sebaris Fungsi:

<Button onClick={this.handleClick} />
Salin selepas log masuk

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} />;
  }
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!