>[info] [immutable.js 官方文檔](https://immutable-js.github.io/immutable-js/docs/#/) [TOC] # 參考資料 [https://zhuanlan.zhihu.com/p/20295971](https://zhuanlan.zhihu.com/p/20295971) [http://cn.redux.js.org/docs/recipes/UsingImmutableJS.html](http://cn.redux.js.org/docs/recipes/UsingImmutableJS.html) [https://blog.csdn.net/sinat\_17775997/article/details/73603797](https://blog.csdn.net/sinat_17775997/article/details/73603797) # 為什么需要使用 immutable.js ？ JavaScript 中的對象一般是可變的（Mutable），因為使用了引用賦值，新的對象簡單的引用了原始對象，改變新的對象將影響到原始對象。如 `foo={a: 1}; bar=foo; bar.a=2` 你會發現此時 `foo.a` 也被改成了 `2`。雖然這樣做可以節約內存，但當應用復雜后，這就造成了非常大的隱患，Mutable 帶來的優點變得得不償失。為了解決這個問題，一般的做法是使用 shallowCopy（淺拷貝）或 deepCopy（深拷貝）來避免被修改，但這樣做造成了 CPU 和內存的浪費。 Immutable 可以很好地解決這些問題。 # 使用 immutable.js 的好處？ Immutable Data 就是一旦創建，就不能再被更改的數據。對 Immutable 對象的任何修改或添加刪除操作都會返回一個新的 Immutable 對象。Immutable 實現的原理是**Persistent Data Structure**（持久化數據結構），也就是使用舊數據創建新數據時，要保證舊數據同時可用且不變。同時為了避免 deepCopy 把所有節點都復制一遍帶來的性能損耗，Immutable 使用了 **Structural Sharing**（結構共享），即如果對象樹中一個節點發生變化，只修改這個節點和受它影響的父節點，其它節點則進行共享。 1\. Immutable 降低了 Mutable 帶來的復雜度 可變（Mutable）數據耦合了 Time 和 Value 的概念，造成了數據很難被回溯。 比如下面一段代碼： ```js function touchAndLog(touchFn) { let data = { key: 'value' }; touchFn(data); console.log(data.key); // 猜猜會打印什么？ } ``` 在不查看 `touchFn` 的代碼的情況下，因為不確定它對 `data` 做了什么，你是不可能知道會打印什么（這不是廢話嗎）。但如果 `data` 是 Immutable 的呢，你可以很肯定的知道打印的是 `value`。 2\. 節省內存 Immutable.js 使用了 Structure Sharing 會盡量復用內存。沒有被引用的對象會被垃圾回收。 ```js import { Map} from 'immutable'; let a = Map({ select: 'users', filter: Map({ name: 'Cam' }) }) let b = a.set('select', 'people'); a === b; // false a.get('filter') === b.get('filter'); // true ``` 上面 a 和 b 共享了沒有變化的 `filter` 節點。 3\. Undo/Redo，Copy/Paste，甚至時間旅行這些功能做起來小菜一碟 因為每次數據都是不一樣的，只要把這些數據放到一個數組里儲存起來，想回退到哪里就拿出對應數據即可，很容易開發出撤銷重做這種功能。 4.擁抱函數式編程 Immutable 本身就是函數式編程中的概念，純函數式編程比面向對象更適用于前端開發。因為只要輸入一致，輸出必然一致，這樣開發的組件更易于調試和組裝。 # 使用 Immutable 的缺點 1\. 需要學習新的 API 2\. 增加了資源文件大小 3\. 容易與原生對象混淆 使用 Immutable.js 過程中遇到最大的問題就是寫代碼要做思維上的轉變。 雖然 Immutable.js 盡量嘗試把 API 設計的原生對象類似，有的時候還是很難區別到底是 Immutable 對象還是原生對象，容易混淆操作。 Immutable 中的 Map 和 List 雖對應原生 Object 和 Array，但操作非常不同，比如你要用 `map.get('key')` 而不是 `map.key`，`array.get(0)` 而不是 `array[0]`。另外 Immutable 每次修改都會返回新對象，也很容易忘記賦值。 當使用外部庫的時候，一般需要使用原生對象，也很容易忘記轉換。 下面給出一些辦法來避免類似問題發生： * 使用 Flow 或 TypeScript 這類有靜態類型檢查的工具 * 約定變量命名規則：如所有 Immutable 類型對象以 `$$` 開頭。 # 實踐 1\. 與 React 搭配使用，Pure Render 熟悉 React 的都知道，React 做性能優化時有一個避免重復渲染的大招，就是使用 `shouldComponentUpdate()`，但它默認返回 `true`，即始終會執行 `render()` 方法，然后做 Virtual DOM 比較，并得出是否需要做真實 DOM 更新，這里往往會帶來很多無必要的渲染并成為性能瓶頸。 <br/> 當然我們也可以在 `shouldComponentUpdate()` 中使用使用 deepCopy 和 deepCompare 來避免無必要的 `render()`，但 deepCopy 和 deepCompare 一般都是非常耗性能的。 <br/> Immutable 則提供了簡潔高效的判斷數據是否變化的方法，只需 `===` 和 `is` 比較就能知道是否需要執行 `render()`，而這個操作幾乎 0 成本，所以可以極大提高性能。修改后的 `shouldComponentUpdate` 是這樣的： ```js import { is } from 'immutable'; shouldComponentUpdate: (nextProps = {}, nextState = {}) => { const thisProps = this.props || {}, thisState = this.state || {}; if (Object.keys(thisProps).length !== Object.keys(nextProps).length || Object.keys(thisState).length !== Object.keys(nextState).length) { return true; } for (const key in nextProps) { if (thisProps[key] !== nextProps[key] || ！is(thisProps[key], nextProps[key])) { return true; } } for (const key in nextState) { if (thisState[key] !== nextState[key] || ！is(thisState[key], nextState[key])) { return true; } } return false; } ``` 使用 Immutable 后，如下圖，當紅色節點的 state 變化后，不會再渲染樹中的所有節點，而是只渲染圖中綠色的部分：  * 使用 `Immutable.fromJS` 而不是 `Immutable.Map` 或 `Immutable.List` 來創建對象，這樣可以避免 Immutable 和原生對象間的混用。