immutable.js初識

介紹

按照官網的定義, Immutable Data是指一旦被創造後，就不能夠被改變的數據。

相等性判斷

JavaScript提供三種不一樣的值比較操做：

1. 嚴格相等 ("triple equals" 或 "identity")，使用 === 
2. 寬鬆相等 ("double equals") ，使用 ==
3. Object.is（ ECMAScript 2015/ ES6 新特性）

三者區別以下：

那麼，javascript是怎麼對兩個對象進行比較的呢？

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。由於對象是經過指針指向的內存中的地址來比較的。

不少場景下，對於屬性相同的對象，咱們但願相等性判斷爲true。Underscore.js和Lodash都有一個名爲_.isEqual()方法，用來處理深度對象的比較。大體思路是遞歸查找對象的屬性進行值比較（具體實現推薦這篇文章：https://github.com/hanzichi/u...）。固然了，對象層級越深，比較越耗時。

相比之下，immutable.js使用了 Structural Sharing（結構共享），特別擅長處理對象的比較，性能很是好。上面的代碼，讓咱們換成immutable.js來表達：

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專業爲english

console.log(Immutable.is(person1, person2));//true
console.log(Immutable.is(person1, person3));//false

恩，達到了咱們想要的效果。

immutable.js之於react的好處

衆所周知，react性能優化的核心在於處理shouldComponentUpdate方法來避免沒必要要的渲染。雖然react提供了PureComponent，但它實質只是淺比較，沒法很好地處理對象的比較，因此仍是不能解決重複渲染的問題。

這個時候，immutable.js應運而生，它能夠完美地解決這個問題，極大地提升react應用的性能。