Immutable Data

Immutable

概念

immutable意为“不可变的”,在编程中Immutable.js用来创建一个不可变的数据类型,对该类型数据进行修改时会生成一个新对象,新对象与原对象完全一致,但是内存地址不同,互不影响。

JS中如果想实现Immutable的效果,可以通过深拷贝基于原对象创建一个新对象的方式实现。

const data = {
  id: "data",
  author: {
    name: "mdemo",
    github: "https://github.com/demohi"
  }
};
const new_data = structuredClone(data);
console.log(data === new_data); // false

Immutable官网地址:immutable-js.com

作用

  • 降低可变数据带来的复杂性
    • 引用赋值虽然节省空间,但是会随着应用越来越复杂后带来意外的bug
  • 节省空间
    • immutable.js底层使用结构共享,会尽量复用内存
  • 撤销重做
    • 将每次输入的数据存储在一个数组中,任意的回退和重做
  • 拥抱函数式编程
    • Immutable 更适合函数式编程,给定输入其输出则一致

适用场景

React中使用Immutable Data

React中组件的Re-render可能由props和state改变引发的,而React对于新旧props和新旧state采用的是浅比较,如果引用类型数据的地址没有发生改变,但是内容改变了,则会导致视图显示错误。

而Immutable Data的特点就是不可变,修改、增加、删除对象都会创建一个新对象,内存地址不相同,不会发生以上问题。

常用API

List

List对应JS中的数组结构。

创建数据

const emptyList = List();
const newList = List([1,2,3,4,5]);
console.log(emptyList,newList);

Immutable Data

修改数据

const newList = List([1,2,3,4,5]);
newList.push(6);
console.log(emptyList,newList);

Immutable Data

接收新数据

const newList1 = newList.push(6);
console.log(newList,newList1,newList === newList1);

Immutable Data

共享未变数据

const obj = {
  name:'臭臭',
  age:4
}
const obj1= {
  name:'酸酸',
  age:5
}

const newList = List([obj]);
const newList1 = newList.push(obj1);
console.log(newList === newList1);
console.log(newList.get(0) === newList1.get(0));

Immutable Data

Map

Map对应JS中的对象结构。

创建数据

const myMap = Map({ x: 1,y: 2 })
const emptyMap = Map();
console.log(emptyMap,myMap);

Immutable Data

修改数据

const myMap = Map({
  x: { num:1 },
  y: { num: 2}
})
myMap.set('y',{num:3});
console.log(myMap);

Immutable Data

接收新数据

const myMap = Map({
  x: { num:1 },
  y: { num: 2}
})
const myMap1 = myMap.set('y',{num:3});
console.log(myMap1, myMap=== myMap1);

Immutable Data

共享未变数据

const myMap = Map({
  x: { num:1 },
  y: { num: 2}
})
const myMap1 = myMap.set('y',{num:3});
console.log(myMap.get('x')=== myMap1.get('x')); // true

Set

Set对应JS中的new Set结构。

创建数据

const mySet = Set([{ name:'臭臭',age:4}])
const emptySet = Set();
console.log(emptySet,mySet);

Immutable Data

修改数据

const mySet = Set([{ name:'臭臭',age:4}])
mySet.add({name:'酸酸',age:5});
console.log(mySet);

Immutable Data

接收新数据

const mySet = Set([{ name:'臭臭',age:4}])
const mySet1 = mySet.add({name:'酸酸',age:5});
console.log(mySet1, mySet === mySet1);

Immutable Data

共享未变数据

console.log(mySet.get({ name:'臭臭',age:4 }) === mySet1.get({ name:'臭臭',age:4 })); // true

原文链接:https://juejin.cn/post/7345760019319734312 作者:冰美式狂魔

(0)
上一篇 2024年3月14日 下午4:31
下一篇 2024年3月14日 下午4:41

相关推荐

发表评论

登录后才能评论