什么是 immutable?为什么要使用它?

什么是 immutable?为什么要使用它?

immutable是一种持久化数据。一旦被创建就不会被修改
Immutable对象的任何修改或添加删除操作都会返回一个新的 Immutable对象
Immutable 实现的原理是 Persistent Data Structure(持久化数据结构

  • 用一种数据结构来保存数据
  • 当数据被修改时,会返回一个对象,但是新的对象会尽可能的利用之前的数据结构而不会对内存造成浪费
  • 如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享

在这里插入图片描述

使用Immutable对象最主要的库是immutable.js,immutable.js 是一个完全独立的库,无论基于什么框架都可以用它,其出现场景在于弥补 Javascript 没有不可变数据结构的问题,内部提供了一套完整的api.还有很多易用的数据类型,

  • List: 有序索引集,类似 JavaScript 中的 Array

  • Map: 无序索引集,类似 JavaScript 中的 Object

  • Set: 没有重复值的集合


fromJS():将一个js数据转换为Immutable类型的数据
toJS():将一个Immutable数据转换为JS类型的数据
is():对两个对象进行比较
get(key):对数据或对象取值
getIn([]) :对嵌套对象或数组取值,传参为数组,表示
.setIn使用 setIn 赋值位置


  • 用 Immutable可以给 React 应用带来性能的优化,主要体现在减少渲染的次数

  • 在做react性能优化的时候,为了避免重复渲染,我们会在shouldComponentUpdate()中做对比,当返回true执行render方法,Immutable通过is方法则可以完成对比,而无需像一样通过深度比较的方式比较

  • 在使用redux过程中也可以结合Immutable,不使用Immutable前修改一个数据需要做一个深拷贝

import Immutable from 'immutable';
foo = Immutable.fromJS({a: {b: 1}});
bar = foo.setIn(['a', 'b'], 2);   // 使用 setIn 赋值
console.log(foo.getIn(['a', 'b']));  // 使用 getIn 取值,打印 1
console.log(foo === bar);  //  打印 false
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

勇敢*牛牛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值