Arahan terperinci untuk mendapatkan kemahiran immutable.js_javascript

Apakah itu Data Tidak Berubah

Data Tidak Berubah merujuk kepada data yang tidak boleh diubah setelah dibuat.

Dengan menggunakan Data Kekal, kami boleh menangani isu seperti caching, rollback dan pengesanan perubahan data dengan lebih mudah, sekaligus memudahkan pembangunan kami.

Data Tidak Berubah dalam js
Dalam JavaScript, kita boleh mensimulasikan Data Kekal melalui klon dalam, iaitu, setiap kali data dikendalikan, data baharu diklon dalam.

klon dalam

/**
 * learning-immutable - clone-deep.js
 * Created by mds on 15/6/6.
 */

'use strict'; 
var cloneDeep = require('lodash.clonedeep');

var data = { 
 id: 'data',
 author: {
  name: 'mdemo',
  github: 'https://github.com/demohi'
 }
};

var data1 = cloneDeep(data);

console.log('equal:', data1===data); //false

data1.id = 'data1'; 
data1.author.name = 'demohi';

console.log(data.id);// data 
console.log(data1.id);// data1

console.log(data.author.name);//mdemo 
console.log(data1.author.name);//demohi 

Sudah tentu anda mungkin menyedari bahawa ini sangat perlahan. Seperti yang ditunjukkan di bawah, ia memang sangat perlahan

Protagonis immutable.js muncul

immutable.js ialah projek sumber terbuka oleh facebook, terutamanya untuk menyelesaikan masalah javascript Immutable Data, dengan merujuk kepada hash maps trys dan vector try Menyediakan cara yang lebih cekap.

Ringkasnya, immutable.js menyelesaikan masalah prestasi melalui perkongsian struktur. Mari tonton video dahulu untuk melihat bagaimana immutable.js melakukannya

Apabila kami mempunyai operasi yang ditetapkan, immutable.js hanya akan mengklon bahagian di atas paras induknya, meninggalkan yang lain tidak berubah, supaya semua orang boleh berkongsi bahagian yang sama, yang boleh meningkatkan prestasi dengan sangat baik.

Mengapa anda perlu menggunakan Data Tidak Boleh Ubah dalam React.js

Semua orang yang biasa dengan React.js harus tahu bahawa React.js ialah rangka kerja dengan UI = f(states) Untuk menyelesaikan masalah kemas kini, React.js menggunakan dom maya, yang mengubah suai dom melalui diff untuk mencapai tinggi. kecekapan.

Bunyinya sempurna, tetapi ada masalah. Apabila keadaan dikemas kini, jika data tidak berubah, anda juga akan melakukan perbezaan dom maya, yang menghasilkan pembaziran. Situasi ini sebenarnya sangat biasa Anda boleh rujuk artikel ini flummox

Sudah tentu anda boleh mengatakan bahawa anda boleh menggunakan PureRenderMixin untuk menyelesaikannya dalam dokumentasi Lihat petua ini di bawah.

Salin kod Kod adalah seperti berikut:

Ini hanya membandingkan objek secara cetek Jika ini mengandungi struktur data yang kompleks, ia mungkin menghasilkan negatif palsu untuk perbezaan yang lebih mendalam Hanya campurkan ke dalam komponen yang mempunyai prop dan keadaan mudah, atau gunakan forceUpdate() apabila anda mengetahui struktur data dalam telah berubah , pertimbangkan untuk menggunakan objek tidak boleh ubah untuk memudahkan perbandingan pantas data bersarang.

PureRenderMixin hanyalah perbandingan cetek yang mudah dan tidak digunakan untuk perbandingan berbilang lapisan. Apa yang perlu dilakukan? ? Jika anda membuat perbandingan yang rumit sendiri, prestasinya akan menjadi sangat teruk.

Penyelesaiannya ialah menggunakan immutable.js untuk menyelesaikan masalah ini. Kerana setiap kali keadaan dikemas kini, selagi terdapat perubahan data, PureRenderMixin boleh segera menentukan perubahan data, yang boleh meningkatkan prestasi dengan ketara. Anda juga boleh merujuk kepada dokumentasi rasmi untuk bahagian ini Immutability Helpers

Ringkasannya ialah: gunakan PureRenderMixin + immutable.js

Rujukan

React.js Conf 2015 - Data Tidak Berubah dan React

Pembantu Keabadian

PureRenderMixin

js tidak berubah