JavaScript中实现不可变对象
实现不可变数据有三种主流的方法
- 深克隆,但是深克隆的性能⾮常差,不适合⼤规模使用
- Immutable.js,Immutable.js 性能良好,但是需要学习额外的API
- immer,利用Proxy特性,⽆需学习额外的api,性能良好
immer的使用方法
安装immer
yarn add immer 或者 npm install immer --save
import { produce } from 'immer' const currentState = { name: '圣斗士', age: 20, dance() { }, un: undefined, nu: null } const res = produce(currentState, draft => { console.log(this) //undefined 注意这里的this指向undefined 因为这里使用了箭头函数; 使用function的话 这里的this指向 draft console.log(draft) // Proxy {i: 0, A: {…}, P: false, I: false, D: {…}, …} }) console.log(res) // {name: "圣斗士", age: 20, un: undefined, nu: null, dance: ƒ} console.log(res == currentState) // true /** 修改draft里面的对象 **/ const res = produce(currentState, draft => { draft.name = '我是hero' draft.age = 35 }) console.log(res) // {name: "我是hero", age: 35, un: undefined, nu: null, dance: ƒ} console.log(res == currentState) // false /** 不改变currentState里面的引用数据 **/ const currentState = { name: '圣斗士', age: 20, dance() { }, un: undefined, nu: null , arr:[], obj:{} } const res = produce(currentState, draft => { draft.name = '我是hero' draft.age = 35 }) console.log(res.arr === currentState.arr) // true console.log(res.obj === currentState.obj) // true /** 修改currentState里面的引用数据 **/ const currentState = { name: '圣斗士', age: 20, dance() { }, un: undefined, nu: null , arr:[], obj:{} } const res = produce(currentState, draft => { draft.arr.push('hello') draft.obj.name = 'change state' }) console.log(res.arr === currentState.arr) // false console.log(res.obj === currentState.obj) // false
由此可见,对 draftState 的修改都会反应到 res上,而 Immer 使用的结构是共享的,res在结构上又与 currentState 共享未修改的部分。
参考
https://blog.csdn.net/Dylan666d/article/details/114745177