JavaScript中实现不可变对象

 

实现不可变数据有三种主流的方法

1. 深克隆，但是深克隆的性能⾮常差，不适合⼤规模使用
2. Immutable.js，Immutable.js 性能良好，但是需要学习额外的API
3. 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