是什么

Immutable是一个独立的js库，无论基于什么框架都可以用它，

• 特性： 一旦创建，就不能再被更改的数据

怎么用

1. 数据类型

• List 有序索引集，类似Array
• Map 无需索引集，类似Object
• Set 没有重复值的集合

2. 主要方法

• fromJS(): 将一个js数据转换为Immutable类型的数据

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

• toJS(): 将一个Immutable数据转换为JS类型的数据

• is() : 对两个对象进行比较

• get(key) : 对数据或对象取值

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

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

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']); // 子级没有值

import Immutable from 'immutable';
foo = Immutable.fromJS({a: {b: 1}});
bar = foo.setIn(['a', 'b'], 2);   // 使用 setIn 赋值
console.log(foo.getIn(['a', 'b']));  // 使用 getIn 取值，打印 1
console.log(foo === bar);  //  打印 false

// 原生
let foo = {a: {b: 1}};
let bar = foo;
bar.a.b = 2;
console.log(foo.a.b);  // 打印 2
console.log(foo === bar);  //  打印 true

react中引用

  getInitialState() {
    return {
      data: Map({ times: 0 })
    }
  },
  handleAdd() {
    this.setState({ data: this.state.data.update('times', v => v + 1) });
    // 这时的 times 并不会改变
    console.log(this.state.data.get('times'));
  }

原理

Immutable 实现的原理是 Persistent Data Structure（持久化数据结构）:

用一种数据结构来保存数据

当数据被修改时，会返回一个对象，但是新的对象会尽可能的利用之前的数据结构而不会对内存造成浪费

FAQ