Memahami kebolehubahan dalam JavaScript

Konsep invarians dalam JavaScript mungkin dikelirukan dengan penugasan semula yang berubah -ubah. Pembolehubah yang diisytiharkan menggunakan let atau var boleh ditugaskan semula, tetapi pembolehubah yang diisytiharkan oleh const tidak boleh.

Sebagai contoh, berikan "Kingsley" kepada pemboleh ubah bernama firstName :

 biarkan firstName = "Kingsley";

Penugasan semula boleh dilakukan:

 firstName = "John";

Ini kerana let digunakan. Sekiranya menggunakan const :

 const lastName = "Silas";

Cuba menugaskan semula akan mengakibatkan kesilapan:

 lastName = "Doe";
// TypeError: Tugasan kepada pembolehubah malar.

Tetapi ini bukan kebolehubahan.

Dalam rangka kerja seperti React, satu konsep penting adalah untuk mengelakkan pengubahsuaian langsung negeri dan sifat (props). Invariance bukan konsep yang unik dari React, tetapi prinsip penting yang bertindak balas menggunakan ketika berurusan dengan negara dan sifat.

Jadi, apakah maksud invariance?

Invariant: berpegang pada fakta

Data yang tidak berubah tidak boleh mengubah strukturnya atau data di dalamnya. Ia memberikan nilai kepada pembolehubah yang tidak dapat diubah, menjadikan nilai sebagai sumber kebenaran dalam rasa seperti seorang puteri mencium katak dan ingin menjadi putera kacak. Invariance bermaksud bahawa katak akan sentiasa menjadi katak.

Walaupun objek dan tatasusunan membenarkan mutasi, ini bermakna struktur data dapat diubah. Jika kita menceritakannya, mencium salah satu katak ini boleh membawa kepada transformasi yang menjadi putera.

Sebagai contoh, objek pengguna:

 biarkan pengguna = {name: "James Doe", lokasi: "lagos"};

Buat objek newUser baru:

 Biarkan Newuser = pengguna;

Jika pengguna pertama mengubah lokasi, ia akan mengubahsuai objek user secara langsung dan mempengaruhi newUser :

 user.location = "Abia";
console.log (newUser.location); // "Abia"

Ini mungkin bukan hasil yang kita mahukan. Penugasan ini mungkin mempunyai akibat yang tidak diingini.

Gunakan objek yang tidak berubah

Kita perlu memastikan objek itu tidak bermutasi. Jika anda ingin menggunakan kaedah, ia mesti mengembalikan objek baru. Pada asasnya, kita memerlukan fungsi murni .

Fungsi tulen mempunyai dua ciri:

1. Nilai pulangan bergantung kepada parameter masuk. Selagi input tetap tidak berubah, nilai pulangan tidak akan berubah.
2. Ia tidak mengubah perkara di luar skopnya.

Menggunakan Object.assign() , kita boleh membuat fungsi yang tidak mengubah objek masuk. Ia akan membuat objek baru dan menyalin parameter kedua dan ketiga ke dalam objek kosong yang diluluskan sebagai parameter pertama, dan kemudian mengembalikan objek baru.

 const updateLocation = (data, newLocation) => {
  kembali object.assign ({}, data, {lokasi: newLocation});
};

updateLocation() adalah fungsi tulen. Jika kita lulus dalam objek pengguna pertama, ia mengembalikan objek pengguna baru dengan atribut location yang mempunyai nilai baru.

Cara lain ialah menggunakan pengendali lanjutan:

 const updateLocation = (data, newLocation) => {
  kembali {... data, lokasi: newlocation};
};

Jadi, apa yang perlu dilakukan dengan React?

Invarians dalam React

Dalam aplikasi reaksi biasa, keadaan adalah objek. (Redux menggunakan objek invarian sebagai asas untuk penyimpanan aplikasi.) Proses koordinasi React menentukan sama ada komponen harus diberikan semula, atau sama ada ia memerlukan cara untuk mengesan perubahan.

Dalam erti kata lain, jika React tidak dapat menentukan bahawa status komponen telah berubah, ia tidak akan tahu untuk mengemas kini DOM maya.

Penguatkuasaan Invariance memungkinkan untuk mengesan perubahan ini. Ini membolehkan bertindak balas untuk membandingkan keadaan lama objek dan keadaan baru dan membuat semula komponen berdasarkan perbezaan itu.

Inilah sebabnya tidak biasanya disyorkan untuk mengemas kini status dalam React secara langsung:

 this.state.username = "JamesDoe";

React tidak akan pasti jika keadaan telah berubah dan komponen tidak boleh diubah.

Immutable.js

Redux mengikuti prinsip invarians. Pengurangannya mestilah fungsi murni, jadi mereka tidak boleh mengubah keadaan semasa, tetapi harus mengembalikan objek baru berdasarkan keadaan dan tindakan semasa. Kami biasanya menggunakan pengendali lanjutan seperti sebelumnya, tetapi kami boleh menggunakan perpustakaan yang dipanggil Immutable.js untuk mencapai kesan yang sama.

Walaupun JavaScript tulen boleh mengendalikan invarians, mungkin terdapat beberapa perangkap dalam proses. Gunakan Immutable.js untuk memastikan invarians semasa menyediakan API yang kaya dengan prestasi unggul. Artikel ini tidak akan masuk ke dalam butiran mengenai semua butir -butir Immutability.js, tetapi kami akan melihat contoh mudah yang menunjukkan cara menggunakannya dalam aplikasi tugas yang dikuasakan oleh React dan Redux.

Pertama, mari kita mulakan dengan mengimport modul yang diperlukan dan menubuhkan komponen TODO.

 const {list, Map} = Immutable;
const {provider, connect} = reactredux;
const {createStore} = redux;

Jika anda beroperasi di mesin tempatan, anda perlu memasang pakej ini:

 NPM Pasang Redux React-Redux Tidak Tua

Penyata import kelihatan seperti ini:

 import {senarai, peta} dari "tidak berubah";
import {penyedia, sambung} dari "React-redux";
import {createStore} dari "redux";

Kami kemudiannya boleh meneruskan komponen Todo kami dengan beberapa tag:

 // ... kod komponen todo ...

Kami menggunakan kaedah handleSubmit() untuk membuat item tugasan baru. Dalam kes ini, pengguna hanya akan membuat item tugasan baru, kita hanya memerlukan satu tindakan:

 // ... kod tindakan ...

Muatan yang kami buat mengandungi ID dan teks item tugasan. Kemudian, kita boleh meneruskan untuk menetapkan fungsi reducer dan lulus operasi yang kita buat di atas ke fungsi reducer:

 // ... kod reducer ...

Kami akan menggunakan connect untuk membuat komponen kontena supaya kami dapat menyambung ke storan. Kemudian, kita perlu lulus dalam fungsi mapStateToProps() dan mapDispatchToProps() untuk disambungkan.

 // ... sambungkan kod ...

Kami menggunakan mapStateToProps() untuk menyediakan data yang disimpan untuk komponen. Kami kemudian menggunakan mapDispatchToProps() untuk menjadikan Pencipta Operasi tersedia untuk komponen sebagai harta.

Dalam fungsi reducer, kami menggunakan List dari Immutable.js untuk membuat keadaan awal permohonan.

 // ... kod reducer ...

Fikirkan List sebagai pelbagai JavaScript, itulah sebabnya kita boleh menggunakan kaedah .push() di state . Nilai yang digunakan untuk mengemas kini keadaan adalah objek, yang terus menunjukkan bahawa Map boleh diiktiraf sebagai objek. Dengan cara ini, tidak perlu menggunakan Object.assign() atau pengendali lanjutan, kerana ia memastikan bahawa keadaan semasa tidak berubah. Ini kelihatan lebih ringkas, terutamanya apabila negeri -negeri bersarang secara mendalam - kita tidak perlu menggunakan pengendali lanjutan di mana -mana.

Keadaan yang tidak berubah membolehkan kod tersebut dengan cepat menentukan sama ada perubahan telah berlaku. Kami tidak perlu membandingkan data secara rekursif untuk menentukan sama ada terdapat perubahan. Yang mengatakan, adalah penting untuk menyebutkan bahawa anda mungkin mengalami masalah prestasi ketika berurusan dengan struktur data yang besar - ada harga untuk menyalin objek data yang besar.

Tetapi data perlu diubah kerana jika tidak, tidak ada keperluan untuk tapak atau aplikasi yang dinamik. Apa yang penting ialah cara menukar data. Invariance menyediakan cara yang betul untuk menukar data aplikasi (atau negeri). Ini memungkinkan untuk menjejaki perubahan dalam keadaan dan menentukan bahagian-bahagian permohonan yang harus diberikan semula disebabkan oleh perubahan itu.

Belajar tidak dapat dipertahankan untuk kali pertama boleh mengelirukan. Walau bagaimanapun, apabila negeri bermutasi, anda akan menghadapi kesilapan yang muncul, yang akan menjadikan anda lebih baik. Ini biasanya merupakan cara yang paling jelas untuk memahami keperluan dan faedah invarians.

Bacaan lanjut

• Invariance dalam React dan Redux
• Tanpa Takus.js 101 - Peta dan Senarai
• Menggunakan Immutable.js dengan Redux

Ambil perhatian bahawa kerana teks asal mengandungi sejumlah besar blok kod, untuk mengekalkan pseudo-asal dan mengelakkan pengulangan yang berlebihan, saya mempermudahkan penerangan beberapa blok kod dan membuat sinonim dan senten-sentuhan kepada beberapa kenyataan. Format imej tetap sama.

Atas ialah kandungan terperinci Memahami kebolehubahan dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!