前言
在官方文档里说的是： Immer 可让您以更方便的方式使用不可变状态。之前一直不明白这个库的意义，使用场景。感觉在项目中使用的场景并不多，后来接触了 React 之后，在写状态管理器的 reducer 时，就经常写出过类似的代码：
const reducer = (state, action) => {
switch (action.type) {
case 'type1':
const { typeVal } = action.payload
return {
...state,
obj2: {
...state.obj2,
type: typeVal,
},
}
}
}
上述的代码并非不行，只是过多的 ... 便会稍微显得有些冗余，如果层数在更深，那更是头皮发麻。
使用 Immer 改写
那么我们想想，假设我们能够像下面这样书写，不就轻松很多了吗？
state.obj2.type = typeVal
但是我们 reducer 是一个纯函数，且不该改变 state 的状态，然后返回一个全新的 nextState，那么就不能够像上面的写法那样，因为上面的写法改变了源数据。
如何使得 state.obj2.type = typeVal 化为可能呢？ Immer 就大显身手了~
查阅 zustand 文档时，看到了使用 Immer 来优化深层嵌套对象状态更新的例子。同理，当我们使用 Immer 来优化我们上面的 reducer 时，代码就会变成 ————
import produce from 'immer'
const reducer = (state, action) => {
// 第一个参数放入 state
// 第二个参数是一个函数，函数的第一个属性是 state的草稿状态，所以这里用 draft 来命名。
// draft 和 state 拥有相同的属性，我们可以直接修改 draft，最终会返回一个全新的 newState
return produce(state, (draft) => {
switch (action.type) {
case 'type1':
const { typeVal } = action.payload
draft.obj2.type = typeVal // 关键赋值
break
}
})
}
我们发现，当使用 produce 包裹起来之后，我们就可以在第二个参数里使用 draft.obj2.type = typeVal。甚至不需要在 case 内部去 return draft; 因为 produce() 函数的返回值就是新的 state
Immer 原理
那么这酷炫的操作是如何实现的呢？简单拜读了 Immer 的源码，分析下其原理。。
代码是从 produce(state, (draft)=> {}) 开始，那么我们就从这里出发，省略部分源码，我们会发现实际上，这里是创建了一个 proxy 对象。
// 这里的第二个参数，是 parent ，父对象，由于我们是第一层，所以并没有父对象，直接为 undefined
const proxy = createProxy(baseState, undefined)
然后我们会发现 createProxy 的实现，先定义了一个 state 对象。
const createProxy = (base, parent) => {
// state 还有部分属性，就略过了，我们只重点看原理
const state = {
base, // 源对象，永远不变
copy: null, // 当出发set访问器时，会修改该属性
parent, // 父对象，用来回溯
modified: false, // 判断是否被修改过（即是否发生过属性 set），该属性用来区分：我们后面使用 copy 还是 base
proxies: {}, // 遇到普通的非proxy对象时，将其存储进该属性
}
// revocable 的作用是创建一个可撤销的 proxy 对象，使用 revoke 方法撤销，但因为我们这里只是简单介绍源码，就略过这一部分
// objectTraps 是proxy的handle，源码里有针对多种情况，我这里只针对 对象 做考虑了。
const { revoke, proxy } = Proxy.revocable(state, objectTraps)
return proxy
}
好了，接下来就是通过 objectTraps 来处理访问器代码。后面详细代码里在说，先跳过这部分。接下来就是将 proxy 对象作为 draft参数 传入给用户提供的函数。
最后再将执行完的全新的 proxy ，在从中剥离出我们需要的对象即可。
简单的 Immer 就实现了，下面是全文代码。
// 源数据
const obj = {
name: 'pnm',
age: 10,
obj1: {
name: 'hello',
age: 11,
obj1A2: {
name: '66',
},
obj2: {
name: 'world',
age: 12,
obj2A2: {
name: '66',
},
},
},
}
// ============================================================================
const isProxy = (value) => {
// 如果是我们定义的 proxy 对象，会触发我们在get访问器中的约定 __PROXY_STATE__
return !!value && !!value['__PROXY_STATE__']
}
const isProxyable = (value) => {
if (!value) return false
if (typeof value !== 'object') return false
return true
}
const markChanged = (state) => {
if (!state.modified) {
state.modified = true
// 浅拷贝 base 并赋给 copy
state.copy = Object.assign({}, state.base)
console.log('copy <==== proxies', state.copy, state.proxies)
// 这一步很关键，因为 copy 里的是变化过的数据，proxies 中存放的是没有变化的proxy对象
Object.assign(state.copy, state.proxies)
// 子属性修改了，肯定父属性也就变了，往父辈回溯
if (state.parent) markChanged(state.parent)
}
}
const each = (value, cb) => {
for (let key in value) cb(key, value[key])
}
// ===========================================================================
const objectTraps = {
get(state, prop) {
// 【注】这里约定了：当get __PROXY_STATE__ 属性时，返回 state
if (prop == '__PROXY_STATE__') return state
if (isProxy(state[prop])) {
return state[prop]
}
if (state.modified) {
// 如果这个状态有被修改过了，那么处理 copy 里的值
const value = state.copy[prop]
// 当这个属性可以被 proxy化，且和源数据是同地址（同一个对象）
if (isProxyable(value) && value === state.base[prop]) {
return (state.copy[prop] = createProxy(value, state))
}
return value
} else {
// 没有被修改过则进入该条件中。
// 如果 proxies 中有这个属性，说明这个属性已经被proxy化，那么直接返回
if (state.proxies?.hasOwnProperty(prop)) return state.proxies[prop]
// 因为没被修改过，所以 copy 里没数据，则从 base 中获取数据。
const value = state.base[prop]
// 当这个值并非 proxy 且又为普通对象，那么创建proxy，并将其挂载到 proxies 的 [prop] 属性上
// 为了不影响源数据，所以 proxies 作为了 base 的替身。
if (!isProxy(value) && isProxyable(value)) {
return (state.proxies[prop] = createProxy(value, state))
}
return value
}
},
set(state, prop, value) {
// 该状态没有被修改过
if (!state.modified) {
// 如果 旧值 和 新值一样，说明没有改变，直接返回
if (
(prop in state.base && state.base[prop] === value) ||
(state.proxies?.hasOwnProperty(prop) && state.proxies[prop] === value)
) {
return true
}
// 改变 modified 为 true，并且浅拷贝 copy ，和 parent
markChanged(state)
}
// 这里将新值赋给copy，不改变源数据
state.copy[prop] = value
return true
},
}
const createProxy = (base, parent) => {
const state = {
base,
copy: null,
parent,
modified: false,
proxies: {},
}
const { proxy } = Proxy.revocable(state, objectTraps)
return proxy
}
const processResult = (proxy) => {
// 【注】这里的 __PROXY_STATE__ 并没有赋值过，只是一个约定，在 get 访问器中，约定了遇到 __PROXY_STATE__ 就返回 state
// 【注2】 为什么要如此做？
// 这是为了去除 proxy 带来的影响，因为如果直接 proxy.xx 属性，那么这个 xx 属性会进入到 get 访问器中。
// 如果先把 proxy 外壳去除，这样，我们的 state 就是一个 普通对象，那么调用 对象.属性，就不会进入到 proxy 的 get 访问器中
const state = proxy['__PROXY_STATE__']
let source = null
if (state.modified) {
source = state.copy
} else {
source = state.base
}
for (const key in source) {
if (Object.hasOwnProperty.call(source, key)) {
const tempState = source[key]
if (isProxy(tempState)) {
source[key] = processResult(tempState)
}
}
}
return source
}
// ============ 下方的produce 为暴露给用户使用的方法 ==================
const produce = (baseState, recipe) => {
/**
* ...省略部分源码
* 源码里做了一些判断，是否是函数，数组等，这里不过多介绍，只假设为 object 的情况
*/
const proxy = createProxy(baseState, undefined)
// 用户传入的方法，修改值并触发 proxy 的访问器
const result = recipe(proxy)
// 从 proxy 中剥离新的修改过的数据。
return processResult(proxy)
}
const newObj = produce(obj, (draft) => {
draft.obj1.obj2.age = 15
})
console.log({ newObj, obj })
这里有一个比较有意思的点，__PROXY_STATE__ 这个属性，我当时在源码里找了半天没找到这个属性在哪里赋值了，后来发现，这个属性不是赋值来的，而是一个约定，即：我 get 这个属性，那么你要给我一个非 proxy 的 state 对象。
这里只是简单的将核心剖析了一下，详细源码还是建议大家阅读 Immer 的源码~这里就不做过多介绍了。
Immer.js 和 Immutable.js
简单提一嘴，还有一个和 Immer 同样的比较出名的库是 Immutable，但大部分情况下还是 Immer 会更好用些， Immutable 是 facebook 团队写的， Immer 是 mobx 作者写的。
Immutable 有自己的数据结构，使用的 API 比较多，上手难度会比 Immer 难一些，大部分情况下你使用 Immer，只需要记住 produce 即可，且库容量对比起来，Immer 更小巧轻量，gzip 压缩一下才 3kb，所以建议如果有使用不可变数据的情况下， Immer 会是你不错的选择
原文链接：https://juejin.cn/post/7335661961902227482 作者：pnm学编程
