Berhenti Menggunakan Fungsi Tanpa Nama dalam Props!

Baiklah, tajuknya agak click-bait. Ada kalanya anda perlu menggunakan fungsi tanpa nama sebagai alat peraga, tetapi mereka mungkin kurang berterima kasih. Tetapi pertama-tama, mari kita huraikan isu itu.

Berfungsi Tanpa Nama sebagai Props

Dalam pustaka komponen seperti Svelte dan React, fungsi tanpa nama yang digunakan sebagai prop komponen telah menjadi sejenis aktiviti malas yang mengancam kembung pada skala yang lebih besar.

Saya lihat ramai pembangun melakukan perkara ini:

<button onclick={() => handleSubmit()}>Submit</button>

Sebaliknya:

<button onclick={handleSubmit}>Submit</button>

Setiap blok kod ini benar-benar akan mencapai hasil yang sama. Satu-satunya perbezaan ialah fungsi tanpa nama telah disilang dalam contoh pertama dan apa yang dilakukannya ialah memanggil fungsi bernama tanpa hujah.

Adakah anda nampak mengapa menggunakan pendekatan anon boleh menjadi masalah? Setiap kali butang ini dipaparkan, fungsi anon serba baharu dicipta dan disimpan dalam ingatan. Jika anda mempunyai sepuluh daripada ini dipaparkan pada halaman yang sama, anda mempunyai sepuluh fungsi tanpa nama yang berbeza yang disimpan dalam ingatan.

Sekarang anda mungkin berkata, "Baiklah, tetapi berapa kerapkah saya akan mempunyai lebih daripada, katakan, sepuluh atau dua puluh elemen interaktif pada halaman?" Dan jawapannya ialah, "Anda mungkin fikir ia adalah kes kelebihan, tetapi ia muncul lebih daripada yang anda sangka. Dan anda juga mungkin bersedia untuk kelebihan dengan tabiat yang baik!"

Contoh utama yang boleh menjadi masalah ialah dalam jadual atau senarai yang lebih besar dengan ciri interaktif, seperti memadam atau mengedit baris atau item. Jika anda mempunyai, sebagai contoh, jenis grid data komponen pada halaman anda dan penomboran anda untuknya ialah, katakan, 100 baris setiap halaman, maka apa sahaja fungsi tanpa nama yang dibuat setiap baris akan berada di sana 100 kali. Jika anda mempunyai kotak pilihan yang melakukan sesuatu pada setiap baris, bersama-sama dengan butang Edit dan Padam, anda kini mempunyai 300 fungsi tanpa nama yang disimpan dalam ingatan, bersama-sama dengan 3 fungsi asal yang dinamakan dan diisytiharkan, dipanggil oleh fungsi tanpa nama.

Lebih teruk lagi jika melakukan muslihat seperti pra-pemarahan tetapi menyembunyikan halaman data seterusnya demi kecekapan. Dalam contoh itu, anda kini mempunyai 600 tika fungsi tanpa nama yang berada dalam ingatan.

Baiklah, kemudian Mengapa Orang Melakukan Ini?

Saya boleh memikirkan sekurang-kurangnya dua sebab mengapa tabiat ini begitu berleluasa dan sebati.

Kereaktifan atau Tingkah Laku Lain yang Diingini

Sekurang-kurangnya di Svelte, ada kalanya anda perlu melakukan ini untuk memastikan fungsi dipanggil secara reaktif. Mungkin terdapat jenis situasi lain yang memerlukan anda melakukan ini untuk membolehkan logik anda berfungsi seperti yang diramalkan, dan walaupun sudah beberapa tahun sejak saya bekerja dengan React, saya yakin terdapat beberapa contoh yang serupa dalam perpustakaan itu juga.

Tetapi ini adalah kes tepi yang boleh anda tangani mengikut keperluan semasa mengekod.

Memudahkan penghantaran param fungsi

Yang ini mungkin penyebab yang paling biasa. Ia membolehkan anda menghantar beberapa jenis keadaan terus ke dalam fungsi, jadi lebih mudah untuk memahami dan berfungsi apabila anda mula-mula mempelajari perpustakaan UI seperti Svelte atau React. Mungkin itulah sebabnya kebanyakan tutorial menunjukkan fungsi tanpa nama sebagai prop.

Berikut ialah contoh (dalam Svelte 5):

<button onclick={() => handleSubmit()}>Submit</button>

Sedap dan bersih kan? Tetapi kami mempunyai potensi isu prestasi ini jika kami mempunyai beratus-ratus contoh butang ini pada halaman ini. Bagaimanakah kita memfaktorkan semula ini untuk menjadi lebih berpotensi?

Penyelesaian yang Lebih Mudah

Seperti yang sering berlaku dalam pengaturcaraan, penyelesaian yang mudah dan mudah ialah memastikan kami mencipta komponen individu untuk perkara seperti EditButton, dan kemudian kami mempunyai productId yang diskop hanya untuk contoh itu. Jadi, kami tidak perlu menghantar apa-apa kepada fungsi pengendali kami kerana ia berada di dalam komponen diskret yang sudah mengetahui apakah productId itu. Itulah sebabnya secara amnya bagus jika kod lebih modular daripada monolitik.

Anda pasti perlu mencuba untuk mendapatkan penyelesaian ini dahulu, jika boleh. Dan perhatikan bahawa kerana komponen kami diasingkan untuk mengendalikan hanya satu productId, kami tidak memerlukan fungsi tanpa nama itu. Sebaliknya, fungsi komponen kami boleh mengendalikannya secara langsung.

<button onclick={handleSubmit}>Submit</button>

Penyelesaian Yang Lebih Kompleks

Tetapi ada kalanya kita tidak boleh mempunyai logik kemas kini terhad kepada skala tempatan seperti ini kerana seni bina sistem atau apa sahaja. Untuk mengendalikan situasi seperti ini, kami melakukan sesuatu yang, ya, sedikit lebih kompleks dan, saya tidak suka mengatakannya, kurang deklaratif daripada menghantar fungsi anon sebagai prop. Tetapi ia masih sangat boleh dibaca dan berfungsi untuk tujuan kita untuk tidak memasukkan sekumpulan fungsi anon ke dalam ingatan.

Ia melibatkan penggunaan atribut data pada elemen html yang mendapat acara yang anda kendalikan (seperti klik). Dan ia kelihatan seperti ini:

// EditButton.svelte

<script>  
  // productId is sent to this component as a prop
  let { productId } = $props()
</script>

const onEditToggle = (productId) => {
  // Do some stuff with productId...
}

<button onclick={() => onEditToggle(productId)}>
  Edit
</button>

Adakah anda nampak apa yang berlaku di sana? Kami meletakkan ID produk ke dalam atribut data tersuai pada elemen butang html di dalam EditButton. Apabila fungsi pengendali menyala, ia boleh mendapatkan ID produk terus dari atribut data elemen.

Sekarang kita hanya mempunyai satu fungsi, onEditToggle, diisytiharkan dalam ingatan, dan segala-galanya hanya menunjuk kepadanya melalui rujukan.

Keseimbangan Antara Kebolehbacaan dan Prestasi

Perasaan peribadi saya adalah untuk sentiasa bermula dengan kod yang dimodularkan dengan sangat baik sehingga penghantaran data utama dilakukan melalui prop tepat ke komponen itu, dan bukannya komponen itu monolitik dan perlu menentukan semua ini secara dalaman. Inilah yang saya huraikan di atas dalam "Penyelesaian yang Lebih Mudah."

Jika anda benar-benar tidak boleh melakukannya, gunakan penyelesaian kedua dengan atribut data.

Sekarang, anda boleh berhujah bahawa kerana menggunakan fungsi anon sedikit lebih mudah dibaca daripada mengendalikan atribut data, perkara yang lebih baik untuk dimulakan, jadi anda boleh menyesuaikannya kemudian jika anda menghadapi masalah prestasi.

Saya bersetuju dengan garis pemikiran itu secara amnya, tetapi ini adalah satu kes di mana komplikasi daripada melakukannya dengan cara ini agak biasa untuk sentiasa melakukannya dengan cara yang sama. Dengan cara ini anda tidak perlu memikirkan sama ada/bila menggunakan satu pendekatan berbanding yang lain. Kedua-duanya berfungsi dan tidak memerlukan pemfaktoran semula kemudian jika anda mendapati anda mengalami masalah prestasi ini.

Akhirnya, Kaveat

Ada kemungkinan besar Svelte mengendalikan perkara ini semasa transpilasi untuk melancarkan fungsi anon ini. Saya tidak cukup pakar tentang masa jalan atau pengkompil Svelte untuk mengatakan dengan pasti. Tetapi saya secara peribadi merasakan bahawa ini adalah corak yang lebih selamat yang terpakai pada mana-mana pustaka JS yang mungkin anda gunakan, jadi ia adalah satu tabiat yang lebih baik untuk diguna pakai di hadapan.

Apa pendapat anda? Adakah anda mempunyai titik balas? Atau mungkin boleh memberikan pandangan tentang perkara yang berlaku pada masa jalanan dan tahap kompilasi dengan Svelte yang mungkin mengubah pendapat saya? Beritahu saya dalam ulasan!

Atas ialah kandungan terperinci Berhenti Menggunakan Fungsi Tanpa Nama dalam Props!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!