react immutable.js

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

 react immutable.js

 

 

 

1.4、常用Api

Map(): 原生objectMap对象

 

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

 

react immutable.js

 

 

 

List(): 原生arrayList对象

 

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())

react immutable.js

 

 

fromJS(): 原生jsimmutable对象

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)

react immutable.js

 

 react immutable.js

 

   

react immutable.js

上一篇:JSTL标签工具类


下一篇:python字符串格式化