Immutable.js 基础操作

本文主要整理了Immutable.js常用API的使用。

Immutable 是什么？

简而言之

• Immutable数据就是一旦创建，就不能更改的数据。
• 每当对Immutable对象进行修改的时候，就会返回一个新的Immutable对象，以此来保证数据的不可变。

因为Immutable的官方文档有点晦涩难懂，本文只是用来整理Immutable常用的API的使用，便于使用与查询，想了解更详细的内容，请戳这里~

Immutable 的几种数据类型

1. List: 有序索引集，类似JavaScript中的Array。
2. Map: 无序索引集，类似JavaScript中的Object。
3. Set: 没有重复值的集合。
4. Record: 跟普通JS对象差不多。1、只是每个key都有一个默认值，可被覆盖。2、当删除一个key时，只是将其value置为默认值，该属性不会从对象上删除。3、key是固定的，一旦创建后就不会增加或减少

用的最多就是List和Map，所以在这里主要介绍这两种数据类型的API。

API的使用

1.fromJS()

作用：将一个js数据转换为Immutable类型的数据。

用法：fromJS(value, converter)

简介：value是要转变的数据，converter是要做的操作。第二个参数可不填，默认情况会将数组准换为List类型，将对象转换为Map类型，其余不做操作。

代码实现：

    const obj = Immutable.fromJS({a:'123',b:'234'})

2.toJS()

作用：将一个Immutable数据转换为JS类型的数据。

用法：immutableValue.toJS()

3.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

4.List 和 Map

创建

• 直接用fromJS将原生转成 List 或 Map
• 构造函数List、Map

const list = List([1,2,3])
const map = Map({a:1,b:2})

取值/设值/删除/ 清空/大小 get/set/delete/clear/size (size为属性，其他为方法)

• 用 toJS 转原生后再操作
• get(key)

list.get(0)  // 1
map.get('a')  // 1

• getIn([]) 对嵌套对象或数组取值，传参为数组，表示位置

let abs = Immutable.fromJS({a: {b:2}});
abs.getIn(['a', 'b']) // 2
abs.getIn(['a', 'c']) // 子级没有值

let arr = Immutable.fromJS([1 ,2, 3, {a: 5}]);
arr.getIn([3, 'a']); // 5
arr.getIn([3, 'c']); // 子级没有值

关于 React 的更新

import { is } from 'immutable';
shouldComponentUpdate: (nextProps, nextState) => {
return !(this.props === nextProps || is(this.props, nextProps)) ||
!(this.state === nextState || is(this.state, nextState));
}

参考文章

• Immutable 详解及 React 中实践
• Immutable.js 简单学习
• Immutable 常用API简介