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
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui