• 简单来说就是Immutable是一种持久化数据结构，一旦被创建就不会被修改。但你修改Immutable对象时候会返回一个新的Immutable，原来的Immutable数据是不会改变的
    • Immutable原理：immutable实现的原理是(持久化数据结构),也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免深拷贝把所有的节点都复制一遍带来的性能损耗，immutable使用了结构共享，即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其他节点则进行共享，如下图所示：
      c741d0c76f3c023c6a0eeed25da871ca.png

    91f0bee7a68f9fee9cac90b41636d293.png

    • Immutable优点：
      1. 降低mutable带来的复杂度
      2. 节省内存
      3. 历史追溯性强（时间旅行指的是，每时每刻的值都被保留了，想回退到哪一步只要简单的将数据取出就行。如果现在页面有个撤销的操作，撤销前的数据被保留了，只需要取出就行，这个特性在redux或者flux中特别有用）
      4. 拥抱函数式编程：immutable本来就是函数式编程的概念，纯函数式编程的特点就是，只要输入一致，输出必然一致，相比于面向对象，这样开发组件和调试更方便
    • 常用api ```jsx // Map(): 原生object转Map对象 (只会转换第一层，注意和fromJS区别) immutable.Map({ name: ‘graceji’, age: 18 });

    // List(): 原生array转List对象 (只会转换第一层，注意和fromJS区别) immutable.List([1, 2, 3, 4, 5]);

    // fromJS(): 原生js转immutable对象 (深度转换，会将内部嵌套的对象和数组全部转成immutable) immutable.fromJS([1, 2, 3, 4, 5]); // 原生array —> List immutable.fromJS({ name: ‘graceji’, age: 18 }); // 原生object —> Map

    // toJS(): immutable对象转原生js (深度转换，会将内部嵌套的Map和List全部转换成原生js) immutableData.toJS();

    // 查看List或者map大小 immutableData.size 或者 immutableData.count()

    // is(): 判断两个immutable对象是否相等 const objA = { name: ‘graceji’, age: 18 }; const objB = { name: ‘graceji’, age: 18 }; const imA = immutable.Map({ name: ‘graceji’, age: 18 }); const imB =immutable.Map({ name: ‘graceji’, age: 18 }); objsA === objB // false； 比较的是地址 immutable.is(imA, imB); // true; 值相同

    // merge() 对象合并 const imA = immutable.fromJS({ a: 1,b: 2 }); const imA = immutable.fromJS({ c: 3 }); const imC = imA.merge(imB); console.log(imC.toJS()) // { a: 1,b: 2,c: 3 }

    // 增删改查（所有操作都会返回新的值，不会修改原来值） const immutableData = immutable.fromJS({ a: 1, b: 2， c: { d: 3 } }); const data1 = immutableData.get(‘a’) // data1 = 1 const data2 = immutableData.getIn([‘c’, ‘d’]) // data2 = 3; getIn用于深层结构访问 const data3 = immutableData.set(‘a’ , 2); // data3中的 a = 2 const data4 = immutableData.setIn([‘c’, ‘d’], 4); // data4中的 d = 4 const data5 = immutableData.update(‘a’ , function(x) { return x+4 }) // data5中的 a = 5 const data6 = immutableData.updateIn([‘c’, ‘d’], function(x) { return x+4 }) // data6中的 d = 7 const data7 = immutableData.delete(‘a’) // data7中的 a 不存在 const data8 = immutableData.deleteIn([‘c’, ‘d’]) // data8中的 d 不存在

    2. - 在react中的实践
    3.    1. shouldComponentUpdate()
    4. ```jsx
    5. // 通过Immutable的结构不可变性&&结构共享性，对数据进行快速的深度对比
    6. shouldComponentUpdate(nextProps, nextState) {
    7.   return !Immutable.is(instance.props, nextProps) || !Immutable.is(instance.state, nextState);
    8. }
    1. 无需在setState()之前做深拷贝 ```jsx import ‘‘ from ‘lodash’; const Component = React.createClass({ getInitialState() { return { data: { times: 0 } } }, handleAdd() { let data = .cloneDeep(this.state.data); data.times = data.times + 1; this.setState({ data: data }); // 如果上面不做 cloneDeep，下面打印的结果会是已经加 1 后的值。 console.log(this.state.data.times); } }

    // 使用Immutable之后 import { Map} from ‘immutable’;
    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’)); }
    ```