Saya telah membaca banyak react
kode dan saya melihat hal-hal seperti ini yang tidak saya mengerti:
handleChange = field => e => {
e.preventDefault();
/// Do something here
}
Saya telah membaca banyak react
kode dan saya melihat hal-hal seperti ini yang tidak saya mengerti:
handleChange = field => e => {
e.preventDefault();
/// Do something here
}
Jawaban:
Itu adalah fungsi kari
Pertama, periksa fungsi ini dengan dua parameter ...
Ini dia lagi dalam bentuk kari ...
Berikut adalah 1 kode yang sama tanpa fungsi panah ...
Fokus pada
return
Mungkin membantu memvisualisasikannya dengan cara lain. Kita tahu bahwa fungsi panah berfungsi seperti ini - mari kita perhatikan nilai pengembaliannya .
Jadi
add
fungsi kita mengembalikan fungsi - kita dapat menggunakan tanda kurung untuk menambahkan kejelasan. The tebal teks nilai kembali dari fungsi kitaadd
Dengan kata lain
add
beberapa angka mengembalikan fungsiMemanggil fungsi kari
Jadi untuk menggunakan fungsi kari kita, kita harus menyebutnya sedikit berbeda ...
Ini karena panggilan fungsi pertama (luar) mengembalikan fungsi kedua (dalam). Hanya setelah kita memanggil fungsi kedua barulah kita benar-benar mendapatkan hasilnya. Ini lebih jelas jika kita memisahkan panggilan pada dua baris ...
Menerapkan pemahaman baru kami pada kode Anda
Oke, sekarang kita mengerti cara kerjanya, mari kita lihat kode Anda
Kami akan mulai dengan mewakilinya tanpa menggunakan fungsi panah ...
Namun, karena fungsi panah mengikat secara leksikal
this
, itu sebenarnya akan terlihat lebih seperti ini ...Mungkin sekarang kita bisa melihat apa yang dilakukan ini dengan lebih jelas. The
handleChange
fungsi menciptakan fungsi untuk ditentukanfield
. Ini adalah teknik Bereaksi yang berguna karena Anda harus mengatur pendengar Anda sendiri pada setiap input untuk memperbarui status aplikasi Anda. Dengan menggunakanhandleChange
fungsi ini, kita dapat menghilangkan semua kode duplikat yang akan menghasilkan pengaturanchange
pendengar untuk setiap bidang. Keren!1 Di sini saya tidak perlu mengikat leksikal
this
karenaadd
fungsi aslinya tidak menggunakan konteks apa pun, jadi tidak penting untuk melestarikannya dalam kasus ini.Bahkan lebih banyak panah
Lebih dari dua fungsi panah dapat diurutkan, jika perlu -
Fungsi kari mampu hal-hal mengejutkan. Di bawah ini kita melihat
$
didefinisikan sebagai fungsi kari dengan dua parameter, namun di situs panggilan, tampak seolah-olah kita dapat menyediakan sejumlah argumen. Kari adalah abstraksi dari arity -Aplikasi sebagian
Aplikasi parsial adalah konsep terkait. Hal ini memungkinkan kita untuk menerapkan sebagian fungsi, mirip dengan kari, kecuali fungsi tidak harus didefinisikan dalam bentuk kari -
Inilah demo
partial
yang dapat Anda mainkan di browser Anda sendiri -sumber
$
digunakan untuk demo konsep, tetapi Anda bisa memberi nama apa pun yang Anda inginkan. Secara kebetulan tetapi sama sekali tidak terkait,$
telah digunakan di perpustakaan populer seperti jQuery, di mana$
semacam semacam titik masuk global ke seluruh fungsi perpustakaan. Saya pikir itu sudah digunakan pada orang lain juga. Lain yang akan Anda lihat adalah_
, dipopulerkan di perpustakaan seperti garis bawah dan lodash. Tidak ada satu simbol pun yang lebih bermakna dari yang lainnya; Anda menetapkan arti untuk program Anda . Ini hanya berlaku JavaScript: D$
dengan melihat cara penggunaannya. Jika Anda bertanya tentang implementasi itu sendiri,$
adalah fungsi yang menerima nilaix
dan mengembalikan fungsi baruk => ...
. Melihat tubuh fungsi yang dikembalikan, kita melihatk (x)
sehingga kita tahuk
pasti juga sebuah fungsi, dan apa pun hasilnyak (x)
akan dimasukkan kembali$ (...)
, yang kita tahu mengembalikan yang laink => ...
, dan seterusnya ... jika Anda masih macet, beri tahu saya.abc(1,2,3)
kurang dari ideal daripadaabc(1)(2)(3)
. Lebih sulit untuk berpikir tentang logika kode dan sulit untuk membaca fungsi abc dan lebih sulit untuk membaca pemanggilan fungsi. Sebelum Anda hanya perlu tahu apa yang dilakukan abc, sekarang Anda tidak yakin apa fungsi yang tidak disebutkan namanya yang dilakukan abc, dan dua kali pada saat itu.Memahami sintaks fungsi panah yang tersedia akan memberi Anda pemahaman tentang perilaku apa yang mereka perkenalkan ketika 'dirantai' seperti dalam contoh yang Anda berikan.
Ketika fungsi panah ditulis tanpa tanda kurung, dengan atau tanpa beberapa parameter, ekspresi yang membentuk tubuh fungsi secara implisit dikembalikan. Dalam contoh Anda, ekspresi itu adalah fungsi panah lain.
Keuntungan lain dari menulis fungsi anonim menggunakan sintaks panah adalah bahwa mereka terikat secara leksikal ke ruang lingkup di mana mereka didefinisikan. Dari 'Fungsi panah' di MDN :
Ini khususnya terkait dalam contoh Anda mengingat diambil dari Reaksiaplikasi. Seperti yang ditunjukkan oleh @naomik, di Bereaksi Anda sering mengakses fungsi anggota komponen menggunakan
this
. Sebagai contoh:sumber
Tip umum, jika Anda bingung dengan salah satu sintaks JS baru dan bagaimana itu akan dikompilasi, Anda dapat memeriksa babel . Misalnya menyalin kode Anda dalam babel dan memilih preset es2015 akan memberikan output seperti ini
sumber
Pikirkan seperti ini, setiap kali Anda melihat panah, Anda menggantinya dengan
function
.function parameters
didefinisikan sebelum panah.Jadi, dalam contoh Anda:
dan kemudian bersama-sama:
Dari dokumen :
sumber
this
.Singkat dan sederhana 🎈
Ini adalah fungsi yang mengembalikan fungsi lain yang ditulis dengan cara singkat.
Mengapa orang melakukannya ❓
Pernahkah Anda berhadapan ketika Anda perlu menulis fungsi yang dapat dikustomisasi? Atau Anda harus menulis fungsi panggilan balik yang memiliki parameter (argumen) tetap, tetapi Anda perlu meneruskan lebih banyak variabel ke fungsi tetapi menghindari variabel global? Jika jawaban Anda " ya " maka itu adalah cara melakukannya.
Misalnya kita memiliki
button
panggilan balik onClick. Dan kita perlu beralihid
ke fungsi, tetapionClick
hanya menerima satu parameterevent
, kita tidak bisa melewatkan parameter tambahan seperti ini:Itu tidak akan bekerja!
Oleh karena itu kami membuat fungsi yang akan mengembalikan fungsi lain dengan ruang lingkup variabel sendiri tanpa variabel global, karena variabel global jahat 😈.
Di bawah fungsi
handleClick(props.id)}
akan dipanggil dan mengembalikan fungsi dan itu akan adaid
dalam ruang lingkupnya! Tidak peduli berapa kali akan ditekan id tidak akan mempengaruhi atau mengubah satu sama lain, mereka benar-benar terisolasi.sumber
Contoh dalam pertanyaan Anda adalah
curried function
yang menggunakanarrow function
dan memilikiimplicit return
argumen pertama.Fungsi panah secara lexic mengikat ini yaitu mereka tidak memiliki
this
argumen sendiri tetapi mengambilthis
nilai dari lingkup melampirkanSetara dengan kode di atas adalah
Satu hal lagi yang perlu diperhatikan tentang contoh Anda adalah mendefinisikan
handleChange
sebagai konst atau fungsi. Mungkin Anda menggunakannya sebagai bagian dari metode kelas dan menggunakan aclass fields syntax
jadi alih-alih mengikat fungsi luar secara langsung, Anda akan mengikatnya di konstruktor kelas
Hal lain yang perlu diperhatikan dalam contoh adalah perbedaan antara pengembalian implisit dan eksplisit.
Di atas adalah contoh pengembalian implisit yaitu. dibutuhkan bidang nilai sebagai argumen dan mengembalikan hasil
field*2
yang secara eksplisit menentukan fungsi untuk kembaliUntuk pengembalian eksplisit Anda akan secara eksplisit memberi tahu metode untuk mengembalikan nilai
Hal lain yang perlu diperhatikan tentang fungsi panah adalah bahwa mereka tidak memiliki fungsi panah sendiri
arguments
tetapi mewarisi itu dari ruang lingkup orang tua.Misalnya jika Anda hanya mendefinisikan fungsi panah seperti
Sebagai fungsi panah alternatif, berikan parameter lainnya yang dapat Anda gunakan
sumber
Mungkin tidak sepenuhnya terkait, tetapi karena pertanyaan yang disebutkan bereaksi menggunakan case (dan saya terus menabrak utas SO ini): Ada satu aspek penting dari fungsi panah ganda yang tidak disebutkan secara eksplisit di sini. Hanya panah 'pertama' (fungsi) yang dinamai (dan karenanya 'dapat dibedakan' oleh run-time), semua panah berikut ini bersifat anonim dan dari sudut pandang Bereaksi dihitung sebagai objek 'baru' pada setiap render.
Dengan demikian fungsi panah ganda akan menyebabkan PureComponent untuk merender setiap saat.
Contoh
Anda memiliki komponen induk dengan penangan perubahan sebagai:
dan dengan render seperti:
{ tasks.map(task => <MyTask handleChange={this.handleChange(task)}/> }
handleChange kemudian digunakan pada input atau klik. Dan ini semua bekerja dan terlihat sangat bagus. TETAPI itu berarti bahwa setiap perubahan yang akan menyebabkan orang tua rerender (seperti perubahan status yang sama sekali tidak terkait) juga akan merender SEMUA MyTask Anda juga meskipun itu adalah komponen PureComponents.
Ini dapat diatasi dengan banyak cara seperti mengoper panah 'terluar' dan objek yang akan Anda beri makan atau menulis fungsi custom shouldUpdate atau kembali ke dasar-dasar seperti menulis fungsi bernama (dan mengikat ini secara manual ...)
sumber