Immutable Data

Immutable

概念

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

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

ini 复制代码
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中的数组结构。

创建数据

ini 复制代码
const emptyList = List();
const newList = List([1,2,3,4,5]);
console.log(emptyList,newList);

修改数据

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

接收新数据

ini 复制代码
const newList1 = newList.push(6);
console.log(newList,newList1,newList === newList1);

共享未变数据

ini 复制代码
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中的对象结构。

创建数据

ini 复制代码
const myMap = Map({ x: 1,y: 2 })
const emptyMap = Map();
console.log(emptyMap,myMap);

修改数据

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

接收新数据

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

共享未变数据

dart 复制代码
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结构。

创建数据

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

修改数据

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

接收新数据

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

共享未变数据

less 复制代码
console.log(mySet.get({ name:'臭臭',age:4 }) === mySet1.get({ name:'臭臭',age:4 })); // true
相关推荐
慧一居士29 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead31 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app