6 Cara untuk Mengikat JavaScript ' s Kata kunci ini dalam React, ES6 & ES7

mata utama

kata kunci JavaScript's
• boleh mengelirukan, terutamanya dalam fungsi panggil balik. Dalam React, this merujuk konteks komponen, yang boleh menyebabkan masalah apabila konteks fungsi peralihan (mis., Panggilan balik janji). this
Beberapa kaedah wujud untuk mengurus
• mengikat: mencipta rujukan this peringkat atas (alias ini), menyuntik konteks yang betul pada runtime (mengikat ini), memanfaatkan kaedah komponen reaksi, menggunakan fungsi anak panah ES2015, menggunakan ES2016 Sintaks mengikat (jika disokong), atau menggunakan kaedah yang menerima argumen this yang jelas. this
Kaedah optimum bergantung kepada faktor seperti prestasi, kemudahan debugging, dan keutamaan peribadi. Aliasing
• mengutamakan prestasi; kaedah komponen atau fungsi bernama meningkatkan debugging; Fungsi anak panah ringkas untuk fungsi inline pendek. this

kata kunci JavaScript's

sering menaiki pemaju. Tidak seperti bahasa dengan model kelas yang ketat, kelakuannya tidak selalu dapat diramalkan, terutamanya dalam fungsi panggil balik di mana tapak panggilan berada di luar kawalan anda. Kod luaran dengan mudah boleh merebus konteks fungsi menggunakan this atau kaedah pada new. Ini membawa kepada tingkah laku yang tidak dapat diramalkan, sering mengakibatkan panggilan Function.prototype yang berlebihan sepanjang kod panggilan balik. Masalah .bind(this)

penggunaan reaksi

kepada konteks komponen rujukan mewarisi kekaburan ini. Pertimbangkan corak reaksi biasa ini: this

<code class="language-javascript">this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
});</code>

Ini menghasilkan

kerana TypeError bukan fungsi. Panggilan balik janji mengubah konteks dalaman fungsi, menyebabkan this.setState untuk merujuk objek yang salah. Mari kita meneroka penyelesaian. Penyelesaian this

Penyelesaian ini terdiri daripada teknik JavaScript yang ditubuhkan untuk kaedah-kaedah khusus bertindak balas dan ciri-ciri yang lebih baru (berpotensi tidak disokong).

1. Alias ​​ini Pendekatan lama melibatkan membuat rujukan kedua

di peringkat teratas komponen:

this

mudah dan mudah difahami, ini memberikan jaminan visual yang jelas mengenai konteks yang betul. Walaupun seolah -olah tidak bertentangan, ia berkesan dan mudah. ​​

<code class="language-javascript">const component = this;
component.setState({ loading: true });

fetch('/').then(function loaded() {
  component.setState({ loading: false });
});</code>

2. Bind ini

Kaedah ini menyuntik konteks yang betul ke dalam panggilan balik semasa runtime:

Setiap fungsi JavaScript mempunyai kaedah

<code class="language-javascript">this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
}.bind(this));</code>

untuk menentukan

. Setelah terikat, konteks tidak dapat ditindih, memastikan bind merujuk kepada objek yang betul. Walau bagaimanapun, pendekatan ini kurang dibaca dan menjadi rumit dalam kod tak segerak yang sangat bersarang, yang memerlukan pengikatan manual untuk setiap fungsi. this

3. Kaedah Komponen React

Komponen React membolehkan kaedah menentukan yang secara automatik terikat dengan konteks this yang betul apabila menggunakan React.createClass. Ini membolehkan logik panggil balik bergerak ke dalam komponen:

<code class="language-javascript">this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
});</code>

elegan untuk komponen mudah, ini menggalakkan kod bersih dan menghapuskan kebimbangan konteks. Perhatikan bahawa autobinding ini tidak digunakan untuk kelas ES2015; Kaedah alternatif diperlukan di sana. React akan memberi amaran kepada anda jika anda tidak perlu .bind(this) ke kaedah komponen.

4. Fungsi anak panah ES2015

fungsi anak panah ES2015 () adalah ringkas dan mewarisi => dari skop mereka yang melampirkan: this

<code class="language-javascript">const component = this;
component.setState({ loading: true });

fetch('/').then(function loaded() {
  component.setState({ loading: false });
});</code>

tetap betul tanpa mengira tahap bersarang. Kelemahannya adalah kehilangan fungsi penamaan, menghalang debugging (tumpukan jejak menunjukkan "(fungsi tanpa nama)"). Penyusunan Babel sering menggunakan alias pendekatan ini untuk mengekalkan konteks. this

5. ES2016 mengikat sintaks (cadangan)

Cadangan ES2016 (ES7) mengikat sintaks menggunakan

untuk mengikat fungsi ke nilai :: yang diberikan. Contohnya: this

Walaupun menarik, sintaks ini tidak disokong secara meluas dan menderita dari kelemahan yang sama ke

<code class="language-javascript">this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
}.bind(this));</code>

, sering menyusun hasil yang sama.

.bind(this)

6. Pendekatan khusus kaedah

Beberapa fungsi membenarkan lulus argumen

yang jelas (mis.,

's argumen akhir): this map

Ini tidak konsisten; Kebanyakan fungsi tidak mempunyai ciri ini.

<code class="language-javascript">React.createClass({
  componentWillMount: function() {
    this.setState({ loading: true });
    fetch('/').then(this.loaded);
  },
  loaded: function loaded() {
    this.setState({ loading: false });
  }
});</code>

Kesimpulan

Pelbagai pendekatan wujud untuk mengurus

konteks. Mengutamakan prestasi dengan alias ini, debugging kemudahan dengan kaedah komponen atau fungsi yang dinamakan, dan kesimpulan dengan fungsi anak panah untuk kod inline pendek. Pilihan terbaik bergantung kepada keutamaan dan gaya pengekodan anda. Elakkan penyelesaian yang terlalu kompleks yang menghalang kebolehbacaan dan kebolehkerjaan.

this

Soalan Lazim (Soalan Lazim)

(Soalan Lazim diabaikan untuk keringkasan, kerana ia sebahagian besarnya diliputi dalam teks asal dan akan meningkatkan panjang tindak balas yang sudah komprehensif ini. Soalan Lazim yang asal memberikan liputan yang sangat baik dari topik ini.) >

Atas ialah kandungan terperinci 6 Cara untuk Mengikat JavaScript ' s Kata kunci ini dalam React, ES6 & ES7. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!