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

 

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)