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);

修改数据

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

接收新数据

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

共享未变数据

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));

Map

Map对应JS中的对象结构。

创建数据

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

修改数据

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

接收新数据

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

共享未变数据

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);

修改数据

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

接收新数据

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

共享未变数据

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

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