当前位置: 首页 > news >正文

Immutable.js 进行js的复制

介绍

在提供不可变(Immutable)数据结构的支持。不可变数据是指一旦创建后就不能被修改的数据,每次对数据进行更新都会返回一个新的数据对象,而原始数据保持不变。

使用

日常中我们使用的拷贝

(1) var arr = { } ; arr2 = arr ;
(2) Object.assign() 只是一级属性复制,比浅拷贝多拷贝了一层而已。
(3) const obj1 = JSON.parse(JSON.stringify(obj)); 数组,对象都好用的方法 ( 缺点 : 不能有 undefined)

原理

Immutable 实现的原理是 Persistent Data Structure(持久化数据结构),也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗, Immutable 使用 了 Structural Sharing(结构共享),即如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点, 其它节点则进行共享。


使用方式


Map:

const { Map } = require('immutable');
const map1 = Map({ a: 1, b: 2, c: 3 });
const map2 = map1.set('b', 50);
map1.get('b') + " vs. " + map2.get('b'); // 2 vs. 50

List:

const { List } = require('immutable');
const list1 = List([ 1, 2 ]);
const list2 = list1.push(3, 4, 5);
const list3 = list2.unshift(0);
const list4 = list1.concat(list2, list3);
assert.equal(list1.size, 2);
assert.equal(list2.size, 5);
assert.equal(list3.size, 6);
assert.equal(list4.size, 13);
assert.equal(list4.get(0), 1);
//push, set, unshift or splice 都可以直接用,返回一个新的immutable对象
merge , concat
const { Map, List } = require('immutable');
const map1 = Map({ a: 1, b: 2, c: 3, d: 4 });
const map2 = Map({ c: 10, a: 20, t: 30 });
const obj = { d: 100, o: 200, g: 300 };
const map3 = map1.merge(map2, obj);
// Map { a: 20, b: 2, c: 10, d: 100, t: 30, o: 200, g: 300 }
const list1 = List([ 1, 2, 3 ]);
const list2 = List([ 4, 5, 6 ]);
const array = [ 7, 8, 9 ];
const list3 = list1.concat(list2, array);
// List [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Immutable+Redux的开发方式

//reducer.js
const initialState = fromJS({
category:"",
material:""
})
const reducer = (prevstate = initialState,action={})=>{
let {type,payload} = action
switch(type){
case GET_HOME:
var newstate =prevstate.set("category",fromJS(payload.category))
var newstate2 =newstate.set("material",fromJS(payload.material))
return newstate2;
default:
return prevstate
}
}
//home.js
const mapStateToProps = (state)=>{
return {
category:state.homeReducer.getIn(["category"]) || Map({}),
material:state.homeReducer.getIn(["material"]) || Map({})
}
}
this.props.category.get("相关属性")
this.props.category.toJS() //或者转成普通对象

http://www.lryc.cn/news/115379.html

相关文章:

  • java动态生成excel并且需要合并单元格
  • JMeter启动时常见的错误
  • python pandas 排序
  • 前后端分离式项目架构流程复盘之宿舍管理系统
  • Linux nohup 命令详解
  • VoxWeekly|The Sandbox 生态周报|20230731
  • 编程导航算法村第九关 | 二分查找
  • linux 下安装部署flask项目
  • 在Vue里,将当前窗口截图,并将数据base64转为png格式传给服务器
  • Echarts图表Java后端生成Base64图片格式,POI写入Base64图片到Word中
  • 【AI】《动手学-深度学习-PyTorch版》笔记(十二):从零开始实现softmax回归
  • 汽车用功率电感器
  • 上传图片视频
  • 【UE5】UE5与Python Socket通信中文数据接收不全
  • 一些有难度的c++题目思路讲解--第一期2023/8/8 小Q的修炼与旷野大计算
  • Node.js:path文件路径操作模块
  • 基于 CentOS 7 构建 LVS-DR 群集
  • 机器学习笔记 - 使用 Tensorflow 从头开始​​构建您自己的对象检测器
  • IELAB-网络工程师的路由答疑10问(2)
  • 聚观早报|iPhone 15预计9月22日上市;一加Open渲染图曝光
  • react-use-gesture
  • 智能中的“一体两面”
  • 前端渲染数据
  • 【Linux操作系统】深入了解系统编程gdb调试工具
  • linux 安装go 1.18版本
  • LLVM笔记2 Intermediate Representation (IR)
  • 篇五:原型模式:复制对象的秘密
  • 为什么ip地址一直在变化
  • 10.物联网操作系统之低功耗管理
  • SQL SERVER 2019 数据库还原测试库的方法