这篇文章主要介绍“Proxy的不可变数据优点及使用方法是什么”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Proxy的不可变数据优点及使用方法是什么”文章能帮助大家解决问题。
对象被赋值后，更改对象，两个都会改变，因为其引用着相同的地址，我们称这为可变对象
所以这会造成意想不到的修改
React 要求本地组件的状态保持不可变性，Redux 同样要求全局状态保持不可变
Immutable.js 中 对 Immutable 对象 增删改查都会返回一个全新的 Immutable 对象，保证旧数据的可用不变
Immutable 使用了结构共享，即对象树中的节点改变只会影响自己和其父节点，其他节点共享
保护数据意外更改，减少bug
方便跟踪数据变更，便于排错
调用麻烦
计算
安全
数据库
网络和加速
企业服务
function updateData(obj, key, value) {
return {
...obj,
[key]: value
};
}
const obj = {
name: "云牧"
};
const newObj = updateData(obj, "name", "黛玉");
console.log(newObj); // { name: '黛玉' }
console.log(obj); // { name: '云牧' }自定义新的对象类型，对其操作细节封装在其内部
著名的 immutable-js，就是这个思路，定义了List、 Stack、 Map、OrderedMap、Set、OrderedSet 和 Record 这么多对象
class MyObject {
constructor(obj = {}) {
this.obj = { ...obj };
}
get(name) {
return this.obj[name];
}
set(name, value) {
return new MyObject({
...this.obj,
[name]: value
});
}
}
const obj = new MyObject({
name: "云牧"
});
const newObj = obj.set("name", "黛玉");
console.log(newObj); // MyObject { obj: { name: '黛玉' } }
console.log(obj); // MyObject { obj: { name: '云牧' } }函数调用产生新对象，对其新对象操作之后返回
性能损耗比较大
function produce(obj, recipe) {
const newObj = { ...obj };
recipe(newObj);
return newObj;
}
const obj = {
name: "云牧"
};
const newObj = produce(obj, draft => {
draft.name = "黛玉";
});
console.log(newObj); // { name: '黛玉' }
console.log(obj); // { name: '云牧' }function produce(obj, recipe) {
const state = {
base: obj, // 基础对象
copy: {}, // 被更改后的对象
draft: {}, // 代理对象
currentKey: 0 // 当前操作的key
};
const handlerItem = {
get(target, property, receiver) {
// 如果更改后的对象存在则使用copy
if (state.copy[state.currentKey]) {
return state.copy[state.currentKey][property];
}
return state.base[state.currentKey][property];
},
set(target, property, value, receiver) {
Reflect.set(state.copy[state.currentKey], property, value);
}
};
const handler = {
get(target, property, receiver) {
state.currentKey = property;
if (!state.draft[property]) {
const val = { ...state.base[property] };
const proxy = new Proxy(val, handlerItem);
state.draft[property] = proxy;
state.copy[property] = val;
}
return state.draft[property];
},
set(target, property, value, receiver) {
return Reflect.set(state.copy, property, value);
}
};
const proxyObj = new Proxy(obj, handler);
recipe(proxyObj);
return proxyObj;
}
const arrObj = Array.from({ length: 100 }, (v, index) => ({ name: "云牧" + index }));
const newObj = produce(arrObj, draft => {
draft[50].name = "黛玉";
});
console.log(newObj[50].name); // 黛玉
console.log(arrObj[50].name); // 云牧50JS没有不可变结构，我们一般可以使用 Immutable.js 和 immerjs
Immutable.js 需要学习他的数据格式操作，且其不可变数据需要 toJS 才能得到原生对象，心智负担大
immerjs 则没有这方面的问题，且体积更为小巧
关于“Proxy的不可变数据优点及使用方法是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
