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)); // 9

const 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()); // true

Map.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>
    )
  }
}