immutable 之 Map、 List

Immutable不可變數據

（一）Immutable引入方式：

（1）npm安裝

npm install immutable

import { Map，List，toJS... } from ‘immutable’

（const {  Map，List，toJS... } = require("immutable")）

 

const map1 = Map({ a: 1, b: 2, c: 3 });

const map2 = map1.set('b', 50);

map1.get('b') + " vs. " + map2.get('b');

（2）文件引入（npm安裝之后的dist文件中有immutable.min.js文件）

 

 <script src="immutable.min.js"></script>

<script>

var map1 = Immutable.Map({ a: 1, b: 2, c: 3 });

var map2 = map1.set('b', 50);

map1.get('b'); // 2

map2.get('b'); // 50

</script>

 

（二）Immutable優缺點

 （1）Immutable優點：

• • 減少內存的使用（深拷貝消耗內存）
  • 並發安全
  • 降低項目的復雜度
  • 便於比較復雜數據，定制shouldComponentUpdate方便
  • 時間旅行功能
  • 函數式編程

（2）Immutable缺點：

• • 學習成本
  • 庫的大小（建議使用seamless-immutable）
  • 對現有項目入侵嚴重
  • 容易與原生的對象進行混淆

 

（三）Immutable的方法 

（1）List是有序的索引密集集合，非常類似於JavaScript數組

const originalArray = [ 'dog', 'frog', 'cat' ]；
let originalArray1 = Immutable.List(originalArray)；
let originalArray2 = originalArray1.set( 1, 'cow')；
console.log(originalArray2.get(1))//cow
console.log(originalArray2.toJS()) // [ 'dog', 'cow', 'cat' ]　；

 

（2）set是設置值，get是獲取值

let originalArray2 = originalArray1.set( 1, 'cow')；

console.log(originalArray2.get(1))//cow

 

（3）toJS()是轉譯為普通的js

const originalArray = [ 'dog', 'frog', 'cat' ]；
let originalArray1 = Immutable.List(originalArray).toJS()//[ 'dog', 'frog', 'cat' ]

 

（4）Map非常類似於JavaScript對象

let arr = {a:1, b:2, c:3};
let arr2 = Immutable.Map(arr);
let arr1 = arr2.set('b',100);

console.log(arr2) //ct {size: 3, _root: pt, __ownerID: undefined, __hash: undefined, __altered: false}
console.log(arr2.toJS()) //{a:1, b:2, c:3}
console.log(arr1.get('b')) //100
console.log(arr2.get('b')) //2

 

更多詳情介紹，查看官方網站：https://facebook.github.io/immutable-js/