一、immutable 用于定義不可改變數(shù)據(jù)

immutable 對象一旦創(chuàng)建，就不能再被更改，Immutable 對象的任何添加、刪除、修改操作都會返回一個新的 immutable 對象，新的對象會盡可能的利用之前的數(shù)據(jù)結(jié)構(gòu)（新舊數(shù)據(jù)保持異同，且結(jié)構(gòu)共享）而不會像深拷貝那樣創(chuàng)建全新的存儲空間造成內(nèi)存浪費

二、Immutable 的安裝和使用

1. 安裝

npm install immutable -S

2. 定義 immutable 數(shù)據(jù) 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 數(shù)組
    const immutableMapArr = List(["a", "b", "c"]);
    console.log(immutableMapArr);

    // 通過 fromJS 定義 immutable 數(shù)組
    const immutableFromJSArr = fromJS(["a", "b", "c"]);
    console.log(immutableFromJSArr);
  }
}
export default Test;

3. immutable 數(shù)據(jù)屬性的增、刪、改、查、清空

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() {
    // 創(chuàng)建 immutable 數(shù)據(jù)
    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() {
    // 創(chuàng)建 immutable 數(shù)據(jù)
    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 對象、數(shù)組比較 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 數(shù)組比較
    const immutableFromJSArr1 = fromJS(["a", "b", "c"]);
    const immutableFromJSArr2 = fromJS(["a", "b", "c"]);
    console.log(is(immutableFromJSArr1,immutableFromJSArr2));
  }
}
export default Test;

5. immutable 數(shù)據(jù)轉(zhuǎn)化成普通 JS 對象 fromJS(obj)

import React, { Component } from "react";
import { fromJS } from "immutable";
class Test extends Component {
  render() {
    return (
      <>
        <div>hello world</div>
      </>
    );
  }
  componentDidMount() {
    // 轉(zhuǎn)化對象
    const immutableFromJSObj = fromJS({ a: 1, b: 2, c: 3 });
    console.log(immutableFromJSObj.toJS());
    
    // 轉(zhuǎn)化數(shù)組
    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 數(shù)據(jù)在 react 中使用

1. 在 redux 中使用
2. 在 shouldComponentUpdate 中優(yōu)化 render 渲染