、immutable.js
1.1、概述
官网:https://immutable-js.github.io/immutable-js/
Immutable.js出自Facebook,是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构,使用结构共享。所有的更新操作都会返回新的值,但是在内部结构是共享的,来减少内存占用(和垃圾回收的失效)。
持久化数据结构:这里说的持久化是用来描述一种数据结构,指一个数据,在被修改时,仍然能够保持修改前的状态,即不可变类型。
结构共享:Immutable使用先进的tries(字典树)技术实现结构共享来解决性能问题,当我们对一个Immutable对象进行操作的时候,ImmutableJS会只clone该节点以及它的祖先节点,其他保持不变,这样可以共享相同的部分,大大提高性能。
惰性操作:创建的对象时其实代码块没有被执行,只是被声明了,代码在获取或修改的时候才会实际被执行
1.2、使用immutable优缺点
- 优点
降低mutable带来的复杂度
节省内存
历史追溯性
拥抱函数式编程
- 缺点
需要重新学习api
资源包大小增加(源码5000行左右)
容易与原生对象混淆:由于api与原生不同,混用的话容易出错
1.3、安装
npm i -S immutable
1.4、常用Api
Map(): 原生object转Map对象
const map1 = Map({ a: 1, b: 2, c: 3})
const map2 = Map({ a: 1, b: 2, c: 3})
console.log(map1 === map2) // false
console.log(map1.equals(map2)) // true
List(): 原生array转List对象
const list1 = List([1, 2]);
const list2 = list1.push(3, 4, 5);
// 获取值
console.log(list2.get(0));
const list1 = List([ 1, 2, 3 ]);
const list2 = List([ 4, 5, 6 ]);
const list3 = list2.concat(list1);
console.log(list3.toArray())
fromJS(): 原生js转immutable对象
const imState = fromJS({
name: ‘lisi‘,
users: [‘aa‘, ‘bb‘]
})
# 获取数据
console.log(imState.get(‘users‘).get(1))
console.log(imState.getIn([‘users‘, 0]))
--------------------------------------------------------
toJS(): immutable对象转原生js 不推荐使用
const state = imState.toJS()
console.log(state);
--------------------------------------------------------
set/setIn/update/updateIn 修改数据
const newState = imState.set(‘name‘, ‘zhangsan‘)
const newState = imState.setIn([‘name‘], ‘zhangsan‘)
const newState = imState.update(‘count‘, value => value + 1)
const newState = imState.updateIn([‘count‘], value => value + 1)