react 解决数据不可变性

本文探讨了JavaScript中对象浅拷贝的问题,包括使用`Object.assign`和扩展运算符可能导致的性能和内存浪费。然后介绍了Immutable.js库,它提供了一种创建不可变数据结构的方法,通过结构共享来优化内存使用。示例展示了如何使用Immutable.js进行对象和List的不可变操作。
摘要由CSDN通过智能技术生成
  1. 对象的浅拷贝:Object.assign或扩展运算符
    对象的浅拷贝带来的问题:
    从代码角度来讲,没有问题,解决了一些实际开发会出现的风险
    从性能角度来说,有问题,如果对象过于庞大,这种拷贝方式会带来性能问题以及内存浪费
  2. Immutable对象
    Immutable对象的特点是:只要修改了对象就会返回一个新的对象,但是旧的对象不会改变。
    为了节约内存,Immutable使用了一种新的算法:Persistent Data Structure(持久化数据结构/一致性数据结构)
    这里的持久化数据结构使用一种数据结构来存储数据;当数据被修改时,会返回一个对象,但新的对象会尽可能利用之前的数据结构而不会对内存造成浪费。
    要做到这一点,需要利用结构共享,新的对象会尽可能利用原来的数据与结构。
    官网连接:https://immutable-js.com/
// 使用
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/4.0.0-rc.14/immutable.min.js"></script>
<script>
    const im = Immutable
    
    // 对象的使用
    const info = {
      name: 'lizhi',
      age: 20,
      friend: {
        name: 'oneone',
        age: 20
      }
    }
    
    const infoIM = im.Map(info)
    const obj = infoIM
    const InfoIM2 = infoIM.set('name', 'why')
    console.log(obj.get('name'))		//lizhi
    console.log(InfoIM2.get('name'))	//why

    const infoIM3 = im.fromJS(info)
    console.log(infoIM3)	//t {size: 3, _root: Ce, __ownerID: undefined, __hash: undefined, __altered: false}

    // list的使用
    const name = ['lizhi', 'oneone', 'liang']
    const nameIM = im.List(name)
    const arrIM = nameIM.set(0,'litchi')
    console.log(nameIM.get(0))		//lizhi
    console.log(arrIM.get(0))		//litchi
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值