Pertama kali diterbitkan di: https://mingjiezhang.github.io/.
Dalam JavaScript, objek ini terikat pada lingkungan eksekusi berbasis fungsi runtime (yaitu, konteks).
Mulailah dengan demo di React
Ketika Facebook baru -baru ini memperbarui bereaksi, kelas di ES6 ditambahkan ke metode pembuatan komponen. Facebook juga merekomendasikan agar Kreasi Penggunaan Komponen Tentukan kelas komponen dengan mendefinisikan kelas yang diwarisi dari react.sponent. Demo resmi:
Class LikeButton memperluas react.component {constructor () {super (); this.state = {liked: false}; this.handleclick = this.handleclick.bind (this);} handleclick () {this.setState ({liked:! this.state.liked}); 'disukai': 'haven/' t disukai '; return (<div onClick = {this.handleclick}> Anda {text} ini. Klik untuk beralih. </div>);}} reactdom.render (<likebutton />.document.getElementById('example'));Ada banyak penggunaan ini dalam demo di atas. Di kelas LikeButton memperluas react. Ini setara dengan baru kelas yang didefinisikan di atas, pertama memanggil fungsi konstruktor (), konteks ini dari ini. State adalah objek instan; Demikian pula, konteks ini dari ini.state.liked dalam fungsi render () juga merupakan objek. Masalahnya adalah bahwa OnClick = {this.handleClick}, tidak ada masalah mendapatkan referensi ke fungsi ini, dan konteksnya di sini adalah objeknya.
Pada saat ini, masalahnya adalah di react.createClass, handleclick () akan secara otomatis mengikat ke instance likeButton ketika acara OnClick dipicu. Pada saat ini, konteks fungsi ini adalah instance. Namun, dalam penulisan kelas ES6, Facebook membatalkan ikatan otomatis. Setelah instantiating likebutton, konteks handleclick () adalah contoh dukungan dari div (instance backing), dan konteks handleclick () pada awalnya terikat untuk menjadi instance likeButton. Kami memiliki beberapa solusi untuk masalah ini.
Gunakan fungsi bind () untuk mengubah konteks ini
Anda dapat menggunakan fungsi konstruktor () dalam deklarasi kelas
this.handleclick = this.handleclick.bind (ini);
Metode ini adalah ikatan Bind () dan digunakan beberapa kali. Dalam metode ini, setelah mendeklarasikan instance, kita dapat menggunakan fungsi handleclick () di mana saja dalam instance, dan konteks fungsi handleclick () ini adalah objek instance likeButton.
Selain itu, kita juga dapat mengikat konteks ini ke objek instance likeButton di mana fungsi digunakan. Kodenya adalah sebagai berikut
<Div onClick = {this.handleclick.bind (this)}> you {text} ini. Klik untuk beralih. </div>Metode ini mengharuskan kita untuk mengikat objek komponen setiap kali menggunakan fungsi Bind ().
fungsi panah ES6
Fungsi panah => telah ditambahkan ke ES6. Selain kenyamanan, fungsi panah memiliki fitur lain yang mengikat fungsi ini pada konteks di mana ia didefinisikan. Fitur ini juga dapat membantu kami menyelesaikan masalah ini. Gunakan kode berikut:
<Div onClick = {() => this.handleclick ()}> Anda {text} ini. Klik untuk beralih. </div>Dengan cara ini konteks ini.handleclick () akan terikat pada objek instance likeButton. Secara pribadi, saya percaya bahwa menggunakan fungsi panah membuat JavaScript lebih dekat dengan gaya pemrograman yang berorientasi objek.
Ringkasan ini
Inti dari ini adalah: Ini tidak ada hubungannya dengan ruang lingkup, tetapi hanya dengan konteks eksekusi.
Di atas adalah metode membuat komponen ini di ES6 dalam Bereaksi bahwa editor diperkenalkan kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!