Immutable.js API 简介

• Immutable-js
  • 这个库的实现是深拷贝还是浅拷贝？
  • immutable 来源
  • immutable.js三大特性：
    • 持久化数据结构
    • 结构共享
    • 惰性操作
  • Immutable.js 的几种数据类型
• immutable 使用
  • 使用 npm 安装 immutable：
• 常用API介绍
  • Map
  • List
  • List.isList() 和 Map.isMap()
  • set() / setIn()
  • get() / getIn()
  • size
  • includes()
  • first() 、 last()
  • is()
  • merge , concat
  • concat()
  • updateIn() 回调函数更新 – 用法参考setIn()
  • toJS()
  • fromJS()
  • 总结：增删改查（所有操作都会返回新的值，不会修改原来值）
• Immutable-js 优缺点
  • 优点：
    • 降低mutable带来的复杂度
    • 节省内存
    • 历史追溯性（时间旅行）
  • 缺点：
    • 需要重新学习api
    • 资源包大小增加（源码5000行左右）
    • 容易与原生对象混淆：由于api与原生不同，混用的话容易出错。

Immutable-js

Immutable.js,

github地址：https://github.com/immutable-js/immutable-js

每次修改一个 Immutable 对象时都会创建一个新的不可变的对象，在新对象上操作并不会影响到原对象的数据

这个库的实现是深拷贝还是浅拷贝？

Immutable ([ɪˈmjuːtəbl] 不变的；不可变的；不能变的) 是 Facebook 开发的不可变数据集合。

不可变数据一旦创建就不能被修改，使得应用开发更简单，允许使用函数式编程技术，比如惰性评估。

Immutable JS 提供一个惰性 Sequence，允许高效的队列方法链，类似 map 和 filter ，不用创建中间代表。

immutable 通过惰性队列和哈希映射提供 Sequence, Range, Repeat, Map, OrderedMap, Set 和一个稀疏 Vector。

immutable 来源

Immutable.js出自Facebook，是最流行的不可变数据结构的实现之一。

它实现了**完全的 持久化 数据结构**，通过使用像tries这样的先进技术来实现结构共享。

所有的更新操作都会返回新的值，但是在内部结构是共享的，来减少内存占用(和垃圾回收的失效)。

immutable.js三大特性：

• Persistent data structure （持久化数据结构）
• structural sharing （结构共享）
• support lazy operation （惰性操作）

持久化数据结构

这里说的持久化是用来描述一种数据结构，

指一个数据，在被修改时，仍然能够保持修改前的状态，即不可变类型。

immutable.js提供了十余种不可变的类型（List，Map，Set，Seq，Collection，Range等）

结构共享

Immutable使用先进的tries(字典树)技术实现结构共享来解决性能问题.

当我们对一个Immutable对象进行操作的时候

ImmutableJS会只clone该节点以及它的祖先节点，其他保持不变，这样可以共享相同的部分，大大提高性能。

惰性操作

const oddSquares = Immutable.seq.of(1, 2, 3, 4, 5, 6, 7, 8).filter(item => {console.log('immutable对象的filter执行');return item % 2;}).map(x => x * x);console.log(oddSquares.get(1)); // 9const jsSquares = [1, 2, 3, 4, 5, 6, 7, 8].filter(item => {console.log('原生数组的filter执行');return item % 2;}).map(x => x * x);console.log(jsSquares[1]); // 9

用seq创建的对象，其实代码块没有被执行，只是被声明了，

代码在get(1)的时候才会实际被执行，取到index=1的数之后，后面的就不会再执行了，

所以在filter时，第三次就取到了要的数，从4-8都不会再执行。

如果在实际业务中，数据量非常大，一个array的长度是几百，要操作这样一个array，如果应用惰性操作的特性，会节省非常多的性能。

Immutable.js 的几种数据类型

• List: 有序索引集，类似JavaScript中的Array。
• Map: 无序索引集，类似JavaScript中的Object。
• OrderedMap: 有序的Map，根据数据的set()进行排序。
• Set: 没有重复值的集合。
• OrderedSet: 有序的Set，根据数据的add进行排序。
• Stack: 有序集合，支持使用unshift()和shift()添加和删除。
• Record: 一个用于生成Record实例的类。类似于JavaScript的Object，但是只接收特定字符串为key，具有默认值。
• Seq: 序列，但是可能不能由具体的数据结构支持。
• Collection: 是构建所有数据结构的基类，不可以直接构建。

用的最多就是List和Map这两种数据类型。

immutable 使用

使用 npm 安装 immutable：

npm install immutable
```js 每个模块都要包括：```js 
var Immutable = require('immutable'); 
var map = Immutable.Map({a:1, b:2, c:3});

常用API介绍

Map

Map(): 原生object转Map对象 (只会转换第一层，注意和fromJS区别)

作用：用来创建一个新的Map对象

代码实现：

var obj = { name: 'demo', age: 100 }
var oldImmutableObj = Map(obj)
console.log(oldImmutableObj)//Map
Immutable.Map(); // 空Map
Immutable.Map({ a: '1', b: '2' });

List

List(): 原生array转List对象 (只会转换第一层，注意和fromJS区别)

作用：用来创建一个新的List对象

代码实现：

const { List } = require('immutable'); 
const list1 = List([ 1, 2 ]); 
const list2 = list1.push(3, 4, 5); 
const list3 = list2.unshift(0); 
const list4 = list1.concat(list2, list3); assert.equal(list1.size, 2); 
assert.equal(list2.size, 5); 
assert.equal(list3.size, 6); 
assert.equal(list4.size, 13);
assert.equal(list4.get(0), 1);   

push, set, unshift or splice 都可以直接用，返回一个新的immutable对象

List.isList() 和 Map.isMap()

作用：判断一个数据结构是不是List/Map类型

用法：

List.isList([]); // false
List.isList(List()); // trueMap.isMap({}) // false
Map.isMap(Map()) // true

set() / setIn()

set()修改immutalble的值：设置第一层key、index的值

用法：

var NewImmutableObj = oldImmutableObj.set('name' , 'demo2')const originalList = List([ 0 ]);
// List [ 0 ]
originalList.set(1, 1);
// List [ 0, 1 ]
originalList.set(0, 'overwritten');
// List [ "overwritten" ]
originalList.set(2, 2);
// List [ 0, undefined, 2 ]const originalMap = Map()
const newerMap = originalMap.set('key', 'value')
const newestMap = newerMap.set('key', 'newer value')

List在使用的时候，将index为number值设置为value。

Map在使用的时候，将key的值设置为value。

在List中使用时，若传入的number为负数，则将index为size+index的值设置为value，
例，若传入-1，则将size-1的值设为value。

若传入的number的值超过了List的长度，则将List自动补全为传入的number的值，将number设置为value，其余用undefined补全。

注：跟js中不同，List中不存在空位，[,],List中若没有值，则为undefined。

setIn()修改immutalble的值：设置深层结构中某属性的值

用法：

const originalMap = Map({subObject: Map({subKey: 'subvalue',subSubObject: Map({subSubKey: 'subSubValue'})})
})const newMap = originalMap.setIn(['subObject', 'subKey'], 'ha ha!')
// Map {
//   "subObject": Map {
//     "subKey": "ha ha!",
//     "subSubObject": Map { "subSubKey": "subSubValue" }
//   }
// }

const newerMap = originalMap.setIn(['subObject', 'subSubObject', 'subSubKey'],'ha ha ha!'
)// Map {
//   "subObject": Map {
//     "subKey": "subvalue",
//     "subSubObject": Map { "subSubKey": "ha ha ha!" }
//   }
// }

用法与set()一样，只是第一个参数是一个数组，代表要设置的属性所在的位置

get() / getIn()

get()获取immutalble 获取一级属性的值

//获取List索引的元素
ImmutableData.get(0);// 获取Map对应key的value
ImmutableData.get('a');oldImmuObj.get("name")
newImmuObj.get("name")

案例

import React, { Component } from 'react'
import { Map } from 'immutable' export default class App extends Component {state = {info: Map({name: 'demo',age: 100})}render() {return (<div>  this.state.info.get('name') --   {this.state.info.get('name')} <br/>this.state.info.get('age') --   {this.state.info.get('age')} <br/><button onClick={()=>{this.setState({info: this.state.info.set('name','32333').set('age', 1000)})}}>修改</button></div>)}
}

getIn()获取immutalble 获取多级属性的值

// 获取嵌套数组中的数据
ImmutableData.getIn([1, 2]);// 获取嵌套map的数据
ImmutableData.getIn(['a', 'b']); const { Map } = 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 vs. 50

多重对象情况

import React, { Component } from 'react'
import { Map } from 'immutable'export default class App extends Component { state = {info: Map({name: 'demo',select: 'aa',fliter: Map({text: '',up: true,down: false})})}componentDidMount() {// console.log(this.state.info)}render() {return (<div><button onClick={() => {this.setState({info: this.state.info.set('name', 'dsdsdd')})}}>change</button> <br />this.state.info.get('name') --   {this.state.info.get('name')} <br /><Child fliter={this.state.info.get('filter')}></Child</div>)}
}class Child extends Component {shouldComponentUpdate(nextProps, nextState) {if (this.props.filter === nextProps.filter) { // 注意此处：判断是否变化return false}return true}render() {return (<div>Child -- {this.props.fliter}</div>)}componentDidUpdate() {console.log('componentDidUpdate')}
}

size

作用：属性，获取List/Map的长度，等同于ImmutableData.count();

用法：

// 查看List或者map大小  
immutableData.size  或者immutableData.count()
```js ### has() 、 hasIn()**作用**：判断是否存在某一个key**用法**： ```js 
Immutable.fromJS([1,2,3,{a:4,b:5}]).has('0'); //true
Immutable.fromJS([1,2,3,{a:4,b:5}]).has('0'); //true
Immutable.fromJS([1,2,3,{a:4,b:5}]).hasIn([3,'b']) //true

includes()

作用：判断是否存在某一个value

用法：

Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(2); //true
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes('2'); //false 不包含字符2
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(5); //false 
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes({a:4,b:5}) //false
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(Immutable.fromJS({a:4,b:5})) //true

first() 、 last()

作用：用来获取第一个元素或者最后一个元素，若没有则返回undefined

代码：

Immutable.fromJS([1,2,3,{a:4,b:5}]).first()//1
Immutable.fromJS([1,2,3,{a:4,b:5}]).last()//{a:4,b:5}Immutable.fromJS({a:1,b:2,c:{d:3,e:4}}).first() //1
Immutable.fromJS({a:1,b:2,c:{d:3,e:4}}).first() //{d:3,e:4}

is()

作用：对两个对象进行比较

用法：is(map1,map2)

简介：

和js中对象的比较不同，在js中比较两个对象比较的是地址，

但是在Immutable中比较的是这个对象hashCode和valueOf，只要两个对象的hashCode相等，值就是相同的，避免了深度遍历，提高了性能

代码实现：

import { Map, is } from 'immutable'
const map1 = Map({ a: 1, b: 1, c: 1 })
const map2 = Map({ a: 1, b: 1, c: 1 })
map1 === map2   //false
Object.is(map1, map2) // false
is(map1, map2) // true// is(): 判断两个immutable对象是否相等
const objA = { name: 'graceji', age: 18 };
const objB = { name: 'graceji', age: 18 };
const imA = immutable.Map({ name: 'graceji', age: 18 });
const imB =immutable.Map({ name: 'graceji', age: 18 });
objsA === objB // false； 比较的是地址
immutable.is(imA, imB); // true; hashcode相同

merge , concat

merge

作用：浅合并，新数据与旧数据对比，旧数据中不存在的属性直接添加，就数据中已存在的属性用新数据中的覆盖

mergrWith

作用：自定义浅合并，可自行设置某些属性的值

mergeIn

作用：对深层数据进行浅合并

mergeDeep

作用：深合并，新旧数据中同时存在的的属性为新旧数据合并之后的数据

mergeDeepIn

作用：对深层数据进行深合并

mergrDeepWith

作用：自定义深合并，可自行设置某些属性的值 ’

代码实现：

const { Map, List } = require('immutable');
const map1 = Map({ a: 1, b: 2, c: 3, d: 4 });
const map2 = Map({ c: 10, a: 20, t: 30 });
const obj = { d: 100, o: 200, g: 300 };const map3 = map1.merge(map2, obj);
// Map { a: 20, b: 2, c: 10, d: 100, t: 30, o: 200, g: 300 } 

这里用一段示例彻底搞懂merge，此示例为Map结构，List与Map原理相同

const Map1 = Immutable.fromJS({a:111,b:222,c:{d:333,e:444}}); 
const Map2 = Immutable.fromJS({a:111,b:222,c:{e:444,f:555}}); 
const Map3 = Map1.merge(Map2); 
//Map {a:111,b:222,c:{e:444,f:555}}const Map4 = Map1.mergeDeep(Map2);  
//Map {a:111,b:222,c:{d:333,e:444,f:555}}const Map5 = Map1.mergeWith((oldData,newData,key)=>{ if(key === 'a'){ return 666; }else{ return newData } 
},Map2); 
//Map {a:666,b:222,c:{e:444,f:555}}

concat()

作用：对象的拼接，用法与js数组中的concat()相同，返回一个新的对象。

用法：const List = list1.concat(list2)

代码实现：

const list1 = List([ 1, 2, 3 ]);
const list2 = List([ 4, 5, 6 ]);
const array = [ 7, 8, 9 ];
const list3 = list1.concat(list2, array);
// List [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

updateIn() 回调函数更新 – 用法参考setIn()

//updateIn 回调函数更新
const nested3 = nested2.updateIn([ 'a', 'b', 'd' ], value => value + 1); 
console.log(nested3); 
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ], d: 7 } } }const nested4 = nested3.updateIn([ 'a', 'b', 'c' ], list => list.push(6));
// Map { a: Map { b: Map { c: List [ 3, 4, 5, 6 ], d: 7 } } }

toJS()

toJS(): immutable数据转原生js类型的数据 (深度转换，会将内部嵌套的Map和List全部转换成原生js)

用法：value.toJS()

代码实现：

const { Map, List } = require('immutable'); 
const deep = Map({ a: 1, b: 2, c: List([ 3, 4, 5 ]) }); console.log(deep.toObject()); // { a: 1, b: 2, c: List [ 3, 4, 5 ] }  
console.log(deep.toArray()); // [ 1, 2, List [ 3, 4, 5 ] ]  
console.log(deep.toJS()); // { a: 1, b: 2, c: [ 3, 4, 5 ] }  
JSON.stringify(deep); // '{"a":1,"b":2,"c":[3,4,5]}'

toJS() mmutable===>普通对象

oldImmuObj.toJS()
newImmuObj.toJS()

案例

import React, { Component } from 'react'
import { Map } from 'immutable' export default class App extends Component {state = {info: {name: 'demo',age: 100}}render() {return (<div>  this.state.info.name --   {this.state.info.name} <br/>this.state.info.age --   {this.state.info.age} <br/><button onClick={()=>{var old = Map(this.state.info)var newData = old.set('name','32333').set('age', 1000)this.setState({info: newData.toJS()})}}>修改</button></div>)}
}

fromJS()

fromJS(): 原生js转immutable对象 (深度转换，会将内部嵌套的对象和数组全部转成immutable)

用法：fromJS(value, converter)

简介：value是要转变的数据，converter是要做的操作。第二个参数可不填，默认情况会将数组准换为List类型，将对象转换为Map类型，其余不做操作

const { fromJS } = require('immutable'); 
const nested = fromJS({ a: { b: { c: [ 3, 4, 5 ] } } }); 
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ] } } } const obj = fromJS({a:'123',b:'234'},function (key, value, path) {console.log(key, value, path)return isIndexed(value) ? value.toList() : value.toOrderedMap())
})

总结：增删改查（所有操作都会返回新的值，不会修改原来值）

代码实现

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

案例

import React, { Component } from 'react'
import { fromJS } from 'immutable' 
export default class App extends Component { // state = {//   info:Map({//       name:"demo",//       location:Map({//           province:"辽宁",//           city:"大连"//       }),//       favor:List(["读书","看报","写代码"])//   })// }// 使用 fromJS 转换成 immutable对象state = {info:fromJS({  // 注意这里 fromJS -- 转换成 immutable对象name:"demo", location:{province:"辽宁",city:"大连"},favor:["读书","看报","写代码"]})
} render() {return (<div><h1>个人信息修改</h1> <div>{this.state.info.get('name')} <button onClick={()=>{this.setState({info: this.state.info.set('name','demo33').setIn(['location','city'],'wuhan')  // 注意这里 setIn(['location','city'],'wuhan')})}}>修改</button></div><div>{this.state.info.get('location').get('province')} -- {this.state.info.get('location').get('city')}</div><ul>{this.state.info.get('favor').map((item,index)=><li key={index}>{item} <button onClick={()=>{this.setState({info: this.state.info.updateIn(["favor"],(list)=>list.splice(index,1)) // 注意这里 updateIn(["favor"],(list)=>list.splice(index,1))})}}>删除</button></li>)}</ul></div>)}
}

Immutable-js 优缺点

优点：

降低mutable带来的复杂度

节省内存

历史追溯性（时间旅行）

时间旅行指的是，每时每刻的值都被保留了，想回退到哪一步只要简单的将数据取出就行。

如果现在页面有个撤销的操作，撤销前的数据被保留了，只需要取出就行，这个特性在redux或者flux中特别有用

• 拥抱函数式编程：immutable本来就是函数式编程的概念，纯函数式编程的特点就是，只要输入一致，输出必然一致，相比于面向对象，这样开发组件和调试更方便

缺点：

需要重新学习api

资源包大小增加（源码5000行左右）

容易与原生对象混淆：由于api与原生不同，混用的话容易出错。