資訊專欄INFORMATION COLUMN
摘要：介紹按照官網(wǎng)的定義是指一旦被創(chuàng)造后，就不可以被改變的數(shù)據(jù)。很多場景下，對(duì)于屬性相同的對(duì)象，我們希望相等性判斷為。和都有一個(gè)名為方法，用來處理深度對(duì)象的比較。之于的好處眾所周知，性能優(yōu)化的核心在于處理方法來避免不必要的渲染。
介紹
按照官網(wǎng)的定義, Immutable Data是指一旦被創(chuàng)造后，就不可以被改變的數(shù)據(jù)。
相等性判斷JavaScript提供三種不同的值比較操作：
嚴(yán)格相等 ("triple equals" 或 "identity")，使用?===?
寬松相等 ("double equals")?，使用?==
Object.is（ ECMAScript 2015/ ES6 新特性）
三者區(qū)別如下：
那么，javascript是怎么對(duì)兩個(gè)對(duì)象進(jìn)行比較的呢？
var person1 = {
age: 27,
gender: "male",
education: {major:"math",school:"Harvard"}
};
var person2 = {
age: 27,
gender: "male",
education: {major:"math",school:"Harvard"}
};
console.log(person1 == person2); //false
console.log(person1 === person2); //false
console.log(Object.is(person1,person2)); //false
雖然，person1和person2的屬性是完全一樣的，但是person1和person2相等性判斷為false。因?yàn)閷?duì)象是通過指針指向的內(nèi)存中的地址來比較的。
很多場景下，對(duì)于屬性相同的對(duì)象，我們希望相等性判斷為true。Underscore.js和Lodash都有一個(gè)名為_.isEqual()方法，用來處理深度對(duì)象的比較。大致思路是遞歸查找對(duì)象的屬性進(jìn)行值比較（具體實(shí)現(xiàn)推薦這篇文章：https://github.com/hanzichi/u...）。當(dāng)然了，對(duì)象層級(jí)越深，比較越耗時(shí)。
相比之下，immutable.js使用了 Structural Sharing（結(jié)構(gòu)共享），特別擅長處理對(duì)象的比較，性能非常好。上面的代碼，讓我們換成immutable.js來表達(dá)：
const person1 = Immutable.Map( {
age: 27,
gender: "male",
education: Immutable.Map({
major:"math",
school:"Harvard"
})
});
const person2 = Immutable.Map( {
age: 27,
gender: "male",
education: Immutable.Map({
major:"math",
school:"Harvard"
})
});
const person3 = person1.setIn(["education","major"], "english"); //person3專業(yè)為english
console.log(Immutable.is(person1, person2));//true
console.log(Immutable.is(person1, person3));//false
恩，達(dá)到了我們想要的效果。
immutable.js之于react的好處眾所周知，react性能優(yōu)化的核心在于處理shouldComponentUpdate方法來避免不必要的渲染。雖然react提供了PureComponent，但它實(shí)質(zhì)只是淺比較，無法很好地處理對(duì)象的比較，所以還是不能解決重復(fù)渲染的問題。
這個(gè)時(shí)候，immutable.js應(yīng)運(yùn)而生，它可以完美地解決這個(gè)問題，極大地提高react應(yīng)用的性能。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88789.html
摘要：文章博客地址所創(chuàng)建的數(shù)據(jù)有一個(gè)迷人的特性數(shù)據(jù)創(chuàng)建后不會(huì)被改變。是的基類，使用該類時(shí)需要至少繼承其子類中的一個(gè)。總結(jié)所提供的和固有的各有優(yōu)勢，未來有可能制定一套原生的規(guī)范，在這之前，是一個(gè)不錯(cuò)的選擇。參考資料官方文檔 文章博客地址：http://pinggod.com/2016/Immutable/ Immutable.js 所創(chuàng)建的數(shù)據(jù)有一個(gè)迷人的特性：數(shù)據(jù)創(chuàng)建后不會(huì)被改變。我們使用 ...
摘要：函數(shù)式編程，一看這個(gè)詞，簡直就是學(xué)院派的典范。所以這期周刊，我們就重點(diǎn)引入的函數(shù)式編程，淺入淺出，一窺函數(shù)式編程的思想，可能讓你對(duì)編程語言的理解更加融會(huì)貫通一些。但從根本上來說，函數(shù)式編程就是關(guān)于如使用通用的可復(fù)用函數(shù)進(jìn)行組合編程。 showImg(https://segmentfault.com/img/bVGQuc); 函數(shù)式編程（Functional Programming），一...
摘要：詳解十大常用設(shè)計(jì)模式力薦深度好文深入理解大設(shè)計(jì)模式收集各種疑難雜癥的問題集錦關(guān)于，工作和學(xué)習(xí)過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內(nèi)存管理。 延遲加載 (Lazyload) 三種實(shí)現(xiàn)方式 延遲加載也稱為惰性加載，即在長網(wǎng)頁中延遲加載圖像。用戶滾動(dòng)到它們之前，視口外的圖像不會(huì)加載。本文詳細(xì)介紹了三種延遲加載的實(shí)現(xiàn)方式。 詳解 Javascript十大常用設(shè)計(jì)模式 力薦~ ...
閱讀 1409·2021-10-11 10:58
閱讀 1488·2021-09-04 16:41
閱讀 684·2019-08-30 15:55
閱讀 809·2019-08-29 18:46
閱讀 3148·2019-08-29 14:05
閱讀 3536·2019-08-26 14:00
閱讀 2461·2019-08-26 13:53
閱讀 3183·2019-08-26 13:29
