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/