1. Shared mutable state #

Shared mutable state is the root of all evil -- Pete Hunt

let objA={age: 8};
let objB=objA;
objB.age=9;
console.log(objA);

• shallowCopy（浅拷贝）或 deepCopy（深拷贝）

2. 什么是 Immutable #

• Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象
• Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变
• 同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享

3. Immutable类库 #

3.1 immutable.js #

内部实现了一套完整的 Persistent Data Structure,还有很多易用的数据类型。像 Collection、List、Map、Set、Record、Seq

let Immutable=require('immutable');
let objA=Immutable.fromJS({info: {age:8}});
let objB = objA.setIn(['info','age'],9);
console.log(objA.getIn(['info','age']));
console.log(objB.getIn(['info','age']));
console.log(objA === objB);

3.2 seamless-immutable 使用Object.defineProperty扩展了 JavaScript的Array和Object对象来实现，只支持 Array 和 Object 两种数据类型 #

let Immutable=require('seamless-immutable');
let objA=Immutable({info: {age: 8}});
let objB=objA.merge({info: {age: 9}});
console.log(objA.info.age);
console.log(objB.info.age);

4. Immutable优势 #

4.1 降低复杂度 #

let obj = {age:8};
handle(obj);
console.log(obj.age);

4.2 节约内存 #

let Immutable=require('immutable');
let p1=Immutable.fromJS({
    name: 'zfpx',
    home:{name:'beijing'}
});
let p2 = p1.set('name','zfpx2');
console.log(p1.get('home')== p2.get('home'));

4.3 方便回溯 #

5. Immutable.is #

let map1 = Immutable.Map({a:1, b:1, c:1});
let map2 = Immutable.Map({a:1, b:1, c:1});
map1 === map2;

为了直接比较对象的值，immutable.js 提供了 Immutable.is 来做值比较

Immutable.is(map1, map2); // true

6. 常用API #

//Map()  原生object转Map对象 (只会转换第一层，注意和fromJS区别)
immutable.Map({name:'danny', age:18})

//List()  原生array转List对象 (只会转换第一层，注意和fromJS区别)
immutable.List([1,2,3,4,5])

//fromJS()   原生js转immutable对象  (深度转换，会将内部嵌套的对象和数组全部转成immutable)
immutable.fromJS([1,2,3,4,5])    //将原生array  --> List
immutable.fromJS({name:'danny', age:18})   //将原生object  --> Map

//toJS()  immutable对象转原生js  (深度转换，会将内部嵌套的Map和List全部转换成原生js)
immutableData.toJS();

//查看List或者map大小
immutableData.size  或者 immutableData.count()

// is()   判断两个immutable对象是否相等
immutable.is(imA, imB);

//merge()  对象合并
var imA = immutable.fromJS({a:1,b:2});
var imA = immutable.fromJS({c:3});
var imC = imA.merge(imB);
console.log(imC.toJS())  //{a:1,b:2,c:3}

//增删改查（所有操作都会返回新的值，不会修改原来值）
var immutableData = immutable.fromJS({
    a:1,
    b:2，
    c:{
        d:3
    }
});
var data1 = immutableData.get('a') //  data1 = 1
var data2 = immutableData.getIn(['c', 'd']) // data2 = 3   getIn用于深层结构访问
var data3 = immutableData.set('a' , 2);   // data3中的 a = 2
var data4 = immutableData.setIn(['c', 'd'], 4);   //data4中的 d = 4
var data5 = immutableData.update('a',function(x){return x+4})   //data5中的 a = 5
var data6 = immutableData.updateIn(['c', 'd'],function(x){return x+4})   //data6中的 d = 7
var data7 = immutableData.delete('a')   //data7中的 a 不存在
var data8 = immutableData.deleteIn(['c', 'd'])   //data8中的 d 不存在

• 英文API
• redux-immutable