--- theme: vuepress highlight: agate --- 更新：现在多了一个状态库适配了 immer：[jotai-immer](https://github.com/jotai-labs/jotai-immer) ## 文章目录 Immer 现在已经成为了很多状态库的标配，包括 Redux, zustand，在去年的库使用频率的[调研中](https://2021.stateofjs.com/en-US/other-tools)，Immer 也是名列前茅。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5911ef413a5d41ddbba35fcf2a8f2b1f~tplv-k3u1fbpfcp-watermark.image?) 为了照顾没有 Immer 使用经验的同学，本文并不直接深入源码，而是包含三个方面： 1. 基于 React，说明原先的问题，探讨为什么需要 Immer 2. Immer 的基础用法，为源码解读做铺垫 3. Immer 源码解读 > [Immer 官网](https://immerjs.github.io/immer/) ## 顾虑重重的深拷贝 ### 1 在 JS 中，实现深拷贝一般来说有下面几种方式： 1. 调用库函数，如 lodash 下的 [cloneDeep](https://www.lodashjs.com/docs/lodash.cloneDeep)。 2. 使用 `JSON.stringify` 和 `JSON.parse` ，但是这种没办法拷贝不属于 JSON 格式的值，例如 Date 对象、函数、Map、Set 等。 3. 使用 [structuredClone](https://developer.mozilla.org/en-US/docs/Web/API/structuredClone)，比第 2 种方法要好，它支持像 Map、Set 这些 JS 内置的对象，但是它不拷贝原型链上的，也不能拷贝函数。事实上，在实际的场景中我们一般还是使用第 1 种方法。 ### 2 在 React 中，有一个或许可以称之为比较反直觉的现象，可以先看代码，再看下方的 GIF 图： ```ts function App() { const [countRef, setCount] = useState({ count: 1 }) console.log('rerendered') function handleClick() { countRef.count += 1 setCount(countRef) } return ( ) } ``` ![CleanShot 2022-09-25 at 09.40.20.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/336f110e34f8443ebc143b85ca4ea143~tplv-k3u1fbpfcp-watermark.image?) 可以看到，当我们点击按钮的时候，值的改变没有表现出来，同时也没有触发组件的重新渲染，也就是说，`countRef` 的索引一直没变，setCount 触发组件渲染失效了。最朴素的解决的方法就是每次重新赋值 countRef 之前都深拷贝一份，上面我们列的三个方法可以随便选用一个，在这里我们选择不太常见的第三个： ```ts function handleClick() { const newCountRef = structuredClone(countRef) newCountRef.count += 1 setCount(newCountRef) } ``` 此时再看： ![CleanShot 2022-09-25 at 09.48.09.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9f0e4d8a7b464050b74c4c3e7281aade~tplv-k3u1fbpfcp-watermark.image?) 这种解决方案可以说是简单粗暴，我们在某些时候也是懒得想，直接使用。但它也有其局限性：它在数据量大的时候就会出现性能瓶颈。如果我们一个列表有非常多项，如果我们只更改了列表中某一项的一个值，接着对一整个列表做一遍深拷贝的话，可想而知，频率很高的深拷贝也是一个比较耗费性能的操作（具体情况需要分析得知）。 ## 临时救火的浅拷贝深拷贝既然不行，我们可能得采用浅拷贝了。于是，最简单的方法可能形如下面这样： ```js list[1].title = 'new title' setList([...list]) ``` 我们利用浅拷贝把 `list` 的地址更改一下，这样也能触发更新。在 React 中，如果我们的子组件没有使用 `React.memo` 包裹，父组件有了更新会触发下面每一个子组件重新渲染，除非子项是一个 Text Node 节点，就算是子组件没有接受任何 props，新旧 props 对象都是空对象 `{}`，进行比较也不等，如下图所示： ![CleanShot 2022-09-25 at 14.43.30@2x.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7eeff9af2d4f4a56a44530d3954057b4~tplv-k3u1fbpfcp-watermark.image?) 好处是利用 React 的这个特性，不深拷贝对象，只改变列表对象的索引，就能触发列表的更新。坏处便是为了造成了很多子项的 Fiber Diff，为了解决这个问题，我们很多时候都得包裹 `React.memo`。而正是由于使用 `React.memo` 包裹，也引发了后面的问题。我们可以设计下面这个例子，你可以在线预览调试一下，推荐点击右上角【查看详情】去查看，当点击【Change Title】按钮，没有任何反应，便是我们上面说的问题了： [代码片段](https://code.juejin.cn/pen/7147210249076736003) 如果你看完了上面的例子，应该就能体会出什么问题了，如何去解决这个问题呢？最朴素的方法则是在自定义 `React.memo` 的 `compare` 函数： ```js const Item = React.memo(({ subject }: { subject: any }) => { return

{subject.title}

}, (prev, cur) => { if (prev.subject !== cur.subject) { return false } return true }) ``` 但是太遗憾了，还是不行，因为我们更改的 list 和新的是同一个索引地址，也就是说 `prev` 和 `cur` 都是同一个。你可以在上面的在线代码片段里修改试一下。难道这个问题就无解了吗？当然不是的，那就是不传递对象下来，而是把值解构出来传下来，这个方法是用到了 memo 函数默认的比较函数是比较 props 每一项的特点： ```js const Item = React.memo(({ title }: { title: string }) => { return

{title}

}) ``` 又或者改值的时候： ```js function handleChange() { setList([ { title: 'Javascript changed', name: 'foo' }, list[1], list[2] ]) } ``` 相信，使用 React 的很多同学都会采用过上面两种写法，甚至还有更麻烦的： ```js setObject({ ...level1, appendLevel1: { ...appendLevel1, appendLevel2: { ... } } }) ``` 上述代码在以前的 Redux 中可谓遍地都是，笔者之前的团队曾在小程序中引入了 Redux，但是没有使用 Immer。写起来麻烦是一个方面，性能也不见得好到哪里去，由于小程序性能有限，在列表达到 200 项的时候，一些低端机器就开始闪退了。 ## Immer 如何解决 Immer 的出现解决了上面的问题，并且完美的兼容 `React.memo`，上面的例子只需改造成： ```js import produce from "immer" // ... function handleChange() { const nextList = produce(list, (draft) => { draft[0].title = 'Javascript Changed' }) setList(nextList) } ``` 在 Hook 中的使用也非常方便： ```js import React, { useCallback } from "react"; import { useImmer } from "use-immer"; function App() { const [todos, setTodos] = useImmer([ { id: "React", title: "Learn React", done: true }, { id: "Immer", title: "Try Immer", done: false } ]); const handleToggle = useCallback((id) => { setTodos((draft) => { const todo = draft.find((todo) => todo.id === id); todo.done = !todo.done; }); }, []); // 其余部分省略... } ``` 如果对完整示例感兴趣，请参阅 [官网](https://immerjs.github.io/immer/example-setstate#useimmer)。 [Redux Toolkit](https://redux-toolkit.js.org/tutorials/quick-start) 也是内置继承了 Immer，主要的改动在 Reducer ，改为了下面这样的格式书写： ```js export const counterSlice = createSlice({ name: 'counter', initialState, reducers: { increment: (state) => { state.value += 1 }, decrement: (state) => { state.value -= 1 }, }, }) ``` 说到这里，不敢相信谁能抵挡得住，想去了解这个库源码的诱惑。话不多说，现在就为大家带来它的源码解读。 > 本文只解析 `produce` 函数的逻辑。 ## Immer 源码解读 ### 前置知识 #### Proxy 1. [Proxy.revocable 阅读资料](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/revocable)：我们可以调用 `new Proxy()` 去创建一个代理，也可以使用 `Proxy.revocable`，但是后者可以销毁掉 proxy 对象。 ```js var revocable = Proxy.revocable({}, { get(target, name) { return "[[" + name + "]]"; } }); var proxy = revocable.proxy; proxy.foo; // "[[foo]]" revocable.revoke(); // proxy 不起作用了，再取值会报错 ``` #### 树的深度优先遍历对 **对象** 的整个代理过程就是一个深度优先遍历，伪代码如下： ```js function traverse (obj) { for (let key of Object.keys(obj)) { doSomethingIn(obj[key]) traverse(obj[key]) } } ``` 接下来，我们把流程拆解为 7 步。 ### Step 1 预备工作，先克隆下代码，安装依赖： ```bash git clone https://github.com/immerjs/immer.git pnpm i ``` [这个](https://github.com/immerjs/immer/blob/fe8f5891d4fdd35107ebb252df85332fd8c53543/src/immer.ts#L44) 是入口函数的地址，如果你想和我一块，可以找到这个位置。 > 如果你想调试代码，可以直接起一个安装了 Immer 的项目进行 Debugger，但是这样某些变量名会被转译，有点妨碍阅读，下面是一个很笨但是管用的方法： > 1. Fork 项目 > 2. 在根目录新建一个 Vite 环境 > 3. 引入入口文件导出的 `produce` 函数 > 4. 有报错，解决它 ### Step 2 我们先给一个最小的实现，让大家快速抓住脉络。我们先来说一下它的实现思路。简单的说，Immer 把原始对象的每一个对象里的值扩充为： ```js var obj = { a: a的值 } // 转化为 var proxyTarget = { a: { base_: a的值 copy_: a的深拷贝 } } ``` 也就是说，本来的值存为 `base_`, 保留一份对原始对象的深拷贝（并不准确，只是为了大家理解），记作 `copy_`。同时会维护一个 proxy 对象，这个 proxy 对象就是 `recipe` 函数的 `draft` 对象。当我们对对象进行修改，Immer 会把这个修改代理到 `copy_` 上面。最后再把 `copy_` 返回（并不准确，只是为了大家理解）。有一点值得注意，在返回最终结果的时候并不是简单的返回 `copy_` 对象，如果当前值没有被修改，那就返回 `base_` 对应的值。我们可以把对象想象成一棵树，当某一个孩子节点被修改了，它及其它的 parent 节点都会被标记为被修改，此时返回 `copy_` 对象上的值；而除去这个链路上的节点（它的 sibling 节点，它 parent 的 sibling 节点）都直接返回 `base_` 对象上的值。所以整体流程可以是： 1. 收集更改 2. 合并更改 > 为了简单起见，本文只考虑对象的场景，数组的情况也不进行考虑，下面不再做特别说明。 ### Step 3 首先，我们给出 `produce` 函数的主体逻辑和注释， ```ts produce = (base: any, recipe: any) => { let result; // 判断传入的值是不是合法的对象 if (isDraftable(base)) { // 创建一个上下文，后面根据上下文可以还原出值 const scope = enterScope(this) // 对 base 对象创建代理，以便劫持所有的修改 const proxy = createProxy(this, base, undefined) // 调用修改函数，我们 recipe 可能只操作 proxy，不返回值 result = recipe(proxy) // 合并出最终的结果，返回 return processResult(result, scope) } } ``` 接下来我们便逐个方法进行解析。 ### Step 4 ```js if (isDraftable(base)) { ... } ``` 如果是对象，我们才可以继续，代码可以简化为： ```js function isDraftable(value: any) { if (!value || typeof value !== "object") return false return true } ``` ### Step 5 ```js const scope = enterScope(this) ``` 目前我们还没有用到它，大家看一下实现即可，可以略过，等用到再回来看，实现如下： ```js let currentScope: ImmerScope | undefined export function enterScope(immer: Immer) { return (currentScope = createScope(currentScope, immer)) } function createScope(parent_, immer_): ImmerScope { return { drafts_: [], parent_, immer_, } } ``` ### Step 6 ```js const proxy = createProxy(this, base, undefined) ``` 代码如下： ```js export function createProxy( immer: Immer, value: T, parent?: ImmerState ): Drafted { const draft: Drafted = createProxyProxy(value, parent) const scope = parent ? parent.scope_ : getCurrentScope() scope.drafts_.push(draft) return draft } ``` 逻辑大致如下： 1. 调用 `createProxyProxy` 绑定好代理关系，返回的是一个 Proxy 对象 2. `scope` 入当前 draft 对象，用途后面解析 3. 返回 Proxy 对象核心是 `createProxyProxy`，它是收集更改过程中灵魂的函数。 ```js export function createProxyProxy( base: T, parent?: ImmerState ): Drafted { const state: ProxyState = { scope_: parent ? parent.scope_ : getCurrentScope()!, modified_: false, finalized_: false, assigned_: {}, parent_: parent, base_: base, draft_: null as any, // set below copy_: null, revoke_: null as any, isManual_: false } let target: T = state as any let traps: ProxyHandler