immutable 与 seamless-Immutable

JavaScript 中的对象一般是可变的（Mutable），因为使用了引用赋值，新的对象简单的引用了原始对象，改变新的对象将影响到原始对象。如 foo={a: 1}; bar=foo; bar.a=2 你会发现此时 foo.a 也被改成了 2。虽然这样做可以节约内存，但当应用复杂后，这就造成了非常大的隐患，Mutable 带来的优点变得得不偿失。为了解决这个问题，一般的做法是使用 shallowCopy（浅拷贝）或 deepCopy（深拷贝）来避免被修改，但这样做造成了 CPU 和内存的浪费。
Immutable 可以很好地解决这些问题。
Immutable Data 就是一旦创建，就不能再被更改的数据 。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享
就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。

 import Pie3D from './index';
import { is, fromJS } from 'immutable';



 componentWillReceiveProps(nextProps) {
        if (!is(fromJS(nextProps.option.data), fromJS(this.props.option.data))) {
            this.setChart(nextProps.option);
        }
    }

https://www.cnblogs.com/3body/p/6224010.html

seamless-Immutable API 汇总

seamless-Immutable是一套轻量级的持久化数据结构库 , seamless-immutable 并没有实现完整的 Persistent Data Structure 而是使用 Object.defineProperty（因此只能在 IE9 及以上使用）扩展了 JavaScript 的 Array 和 Object 对象来实现，只支持 Array 和 Object 两种数据类型，API 基于与 Array 和 Object 操持不变。代码库非常小，压缩后下载只有 2K。相比 Immutable.js 压缩后下载有 16K而言，小巧了很多, 而且API比较简洁，易懂

1设置成Immutable 对象

import Immutable from 'seamless-immutable';

 let o1 = Immutable({'a': 1, 'B': {'b': 2}});
 console.log(o1);

image.png

2 返回对象的可变副本

也就是复制一个出来，转化成Array、Object类型的数据
asMutable(obj,type)
obj： immutable
type：默认是{deep:false}
返回数组的可变副本,对于深度可变的副本需设置 {deep:true}

   let o1 = Immutable({'a': 1, 'B': {'b': 2}});
        console.log('o1', o1);
        let o2 = Immutable.asMutable(o1);
        console.log('o2', o2);

image.png

3 合并 Immutable对象，也可用来改变数据(Array无效)

merge (obj1,obj2,type)
obj1 immutable
obj2 : object| array
type: object 默认是{deep:false}
返回合并后的 Immutable,对于深度可变的副本需设置 {deep:true}

  var   obj1 = Immutable({a: 'AA', b: 'BB', c: 'CC'});
        let newobj1 = Immutable.merge(obj1, {c: 'CC', d: 'DD'});
        console.log(newobj1); // Immutable({a: "AA", b: "BB", c: "CC", d: "DD"})
     
        var obj2 = Immutable({status: 'ok', data: {a: 'AA', b: 'BB'}});
        let newsobj2 = Immutable.merge(obj2, [{status: 'error', data: {c: 'CC'}}, {data: {a: 'AAAA'}}], {deep: true});
        console.log(newsobj2); // Immutable({status: "error", {a: "AAAA", b: "BB", c: "CC"}})
      
        var code1 = Immutable([1, 2, 3]); // Array无效
        let code2 = Immutable.merge(code1, [4, 5, 6]);
        console.log(code2); // Immutable([1,2,3]

image.png
image.png

4 浅层设置 或改变 immutable 对象制定的值

set(obj,key,value,type)
obj1 immutable
key : string
value : any
type: object 默认是{deep:false}

  var   obj1 = Immutable({a: 'AA', b: 'BB', c: 'CC'});
        console.log(obj1); 
        var newObj =  Immutable.set(obj1, 'a', '123');
        console.log(newObj);

45 深度设置 immutable 对象制定的值

var obj = Immutable({a: 'AA', b: 'BB', c: {d: 'DD'}});
let newobj = Immutable.setIn(obj, ['c', 'd'], 'DDDD');
console.log(obj);//Immutable({a: 'AA', b: 'BB', c: {d: 'DD'})
console.log(newobj); //Immutable({a: 'AA', b: 'BB', c: {d: 'DDDD'})

回调函数，删除元素，将数据转化为对象，见下方文档链接
中文文档
https://blog.csdn.net/weixin_34178244/article/details/91470314