immutable.js理解

它内部实现了一套完整的持久化数据结构 还有些自己特有的易用数据类型 List 类似于Array Map 类似于 Object   还有像map get set 这些函数操作  同时API 也尽量与原生JS的Object和Array类似

        1. Immutable的Data对象一旦创建,就不能再被更改的数据 对Immutable对象的任何修改 添加删除操作都会返回一个全新的immutable对象

        2. immutable实现原理是持久化数据结构 也就是使用旧数据创建新数据的时候,要保证旧数据同时可用且不变

        3. 为了避免深拷贝时把所有节点都复制一遍带来的性能消耗,immutable使用了共享结构,即如果对象树种一个节点发生变化,只修改这个节点和受它影响的父节点,其子节点则进行共享

(也就是说一个节点被修改 则只对受到修改值影响的这个值的父节点进行修改 修改的值的子节点不变)

特点:       

        1.持久化数据结构

        2. 共享结构

        3. 速度快,用时短       

(immutable的fromJS方法在进行深拷贝时 是比JSON.parse(JSON.stringify()) 速度要快的)

immutable的fromJS方法 将一个js数据转换成immutable数据

immutable的toJS则是将immutable数据转成JS数据

获取值

const obj1 = Immutable.fromJS({a: 1, b: 2, c: {d: 3, e: 4}});
let b = obj1.get('b');
let d = obj1.getIn(['c', 'd']); // 嵌套值获取方式

const obj1 = Immutable.fromJS({a: 1, b: 2, c: {d: 3, e: 4}});
// 修改单个值
const obj2 = obj1.set('b', 5);  // ({a: 1, b: 5, c: {d: 3, e: 4}})
// 连写set修改同级多个值
const obj3 = obj1.set('a', 6).set('b', 5);  // ({a: 6, b: 5, c: {d: 3, e: 4}})
// merge修改多个值
const obj4 = obj1.merge({a: 6, b: 5}); // ({a: 6, b: 5, c: {d: 3, e: 4}})
// getIn修改嵌套的值
const obj5 = obj1.setIn(['c', 'd'], 6); // ({a: 1, b: 2, c: {d: 6, e: 4}})

        优点:

                1. 相比js的深拷贝Immutable性能更好

                 2. 节省内存空间 Immutable可以进行结构共享 会尽量的去复用内存

                 3. 随意穿梭 因为每次的数据都一样 把这次数据保存起来或放到数组中可以进行回退操作 

                 4. 函数式编程 相比面向对象编程更适于前端开发 只要输入一致 得到结果就一定一致 更易于组件组装和调试

        缺点:

                 1. 学习成本高

                 2. 需要额外引入资源文件

                 3. 使用过程中容易和原生js对象混淆

        什么时候用Immutable比较好?

                        如果项目中有很大的深拷贝需求量 可以使用Immutable 还有例如上述说的Immutable优点中可以因为每次操作后的数据都是不一样的 可以做回退撤销功能的操作 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值