一、immutable 用于定义不可改变数据

immutable 对象一旦创建，就不能再被更改，Immutable 对象的任何添加、删除、修改操作都会返回一个新的 immutable 对象，新的对象会尽可能的利用之前的数据结构（新旧数据保持异同，且结构共享）而不会像深拷贝那样创建全新的存储空间造成内存浪费

二、Immutable 的安装和使用

1. 安装

npm install immutable -S

2. 定义 immutable 数据 Map(obj)、List(arr)、fromJS(obj or arr)

import React, { Component } from "react";
import { Map, List, fromJS } from "immutable";
class Test extends Component {
  render() {
    return (
      <>
        <div>hello world</div>
      </>
    );
  }
  componentDidMount() {
    // 通过 Map 定义 immutable 对象
    const immutableMapObj = Map({ a: 1, b: 2, c: 3 });
    console.log(immutableMapObj);

    // 通过 fromJS 定义 immutable 对象
    const immutableFromJSObj = fromJS({ a: 1, b: 2, c: 3 });
    console.log(immutableFromJSObj);

    // 通过 List 定义 immutable 数组
    const immutableMapArr = List(["a", "b", "c"]);
    console.log(immutableMapArr);

    // 通过 fromJS 定义 immutable 数组
    const immutableFromJSArr = fromJS(["a", "b", "c"]);
    console.log(immutableFromJSArr);
  }
}
export default Test;

3. immutable 数据属性的增、删、改、查、清空

1. immutable 单层属性 set(key,value)、get(key)、delete(key)、clear()

import React, { Component } from "react";
import { fromJS } from "immutable";
class Test extends Component {
  render() {
    return (
      <>
        <div>hello world</div>
      </>
    );
  }
  componentDidMount() {
    // 创建 immutable 数据
    const immutableMapObj = fromJS({ a: 1, b: 2, c: 3 });

    // 新增
    const addImmutableMapObj = immutableMapObj.set('d',4)
    console.log('新增: ',addImmutableMapObj.toJS());

    // 删除
    const deleteImmutableMapObj = immutableMapObj.delete('d',4)
    console.log('删除: ',deleteImmutableMapObj.toJS());

    // 修改
    const updateImmutableMapObj = immutableMapObj.set('c',333)
    console.log('修改: ',updateImmutableMapObj.toJS());

    // 查询
    const selectImmutableMapObj = immutableMapObj.set('c',333)
    console.log('查值: ',selectImmutableMapObj.get('a'));
    console.log('查长度: ',selectImmutableMapObj.size);

    // 清空
    const clearImmutableMapObj = immutableMapObj.clear()
    console.log('清空: ',clearImmutableMapObj.toJS());
  }
}
export default Test;

2. immutable 嵌套属性 setIn([key1,key11],value)、getIn([key1,key11])、deleteIn([key1,key11])

import React, { Component } from "react";
import { fromJS } from "immutable";
class Test extends Component {
  render() {
    return (
      <>
        <div>hello world</div>
      </>
    );
  }
  componentDidMount() {
    // 创建 immutable 数据
    const immutableMapObj = fromJS({ a: 1, b: {bb: 3}});

    // 新增
    const addImmutableMapObj = immutableMapObj.setIn(['b','bb'], 4)
    console.log('新增: ',addImmutableMapObj.toJS());

    // 删除
    const deleteImmutableMapObj = immutableMapObj.deleteIn(['b','bb'])
    console.log('删除: ',deleteImmutableMapObj.toJS());

    // 修改
    const updateImmutableMapObj = immutableMapObj.setIn(['b','bb'],444)
    console.log('修改: ',updateImmutableMapObj.toJS());

    // 查询
    const selectImmutableMapObj = immutableMapObj
    console.log('查值: ',selectImmutableMapObj.getIn(['b','bb']));
  }
}
export default Test;

4. immutable 对象、数组比较 is(immutableObj1, immutableObj2)

import React, { Component } from "react";
import { fromJS,is } from "immutable";
class Test extends Component {
  render() {
    return (
      <>
        <div>hello world</div>
      </>
    );
  }
  componentDidMount() {
    // immutableb 对象比较
    const immutableFromJSObj1 = fromJS({ a: 1, b: 2, c: 3 });
    const immutableFromJSObj2 = fromJS({ a: 1, b: 2, c: 3 });
    console.log(is(immutableFromJSObj1,immutableFromJSObj2));
    
    // immutableb 数组比较
    const immutableFromJSArr1 = fromJS(["a", "b", "c"]);
    const immutableFromJSArr2 = fromJS(["a", "b", "c"]);
    console.log(is(immutableFromJSArr1,immutableFromJSArr2));
  }
}
export default Test;

5. immutable 数据转化成普通 JS 对象 fromJS(obj)

import React, { Component } from "react";
import { fromJS } from "immutable";
class Test extends Component {
  render() {
    return (
      <>
        <div>hello world</div>
      </>
    );
  }
  componentDidMount() {
    // 转化对象
    const immutableFromJSObj = fromJS({ a: 1, b: 2, c: 3 });
    console.log(immutableFromJSObj.toJS());
    
    // 转化数组
    const immutableFromJSArr = fromJS(["a", "b", "c"]);
    console.log(immutableFromJSArr.toJS());
  }
}
export default Test;

三、immutable 对象改变后返回新对象

import React, { Component } from "react";
import { Map } from 'immutable'
class Test extends Component {
  render() {
    return (
      <>
        <div>hello world</div>
      </>
    );
  }
  componentDidMount(){
    // 定义原始 immutable 对象
    const map1 = Map({ a: 1, b: 2, c: 3 });

    // 修改原始 immutable 对象 map1 为 map2
    const map2 = map1.set('b', 50);

    // 获取原始 immutable 对象的属性值
    console.log(map1.get('b'));

    // 获取新 immutable 对象的属性值
    console.log(map2.get('b'));
  }
}
export default Test;

四、immutable 数据在 react 中使用

1. 在 redux 中使用
2. 在 shouldComponentUpdate 中优化 render 渲染