如何实现javascript不可变更新_immer库原理是什么？-js教程-PHP中文网

如何实现javascript不可变更新_immer库原理是什么？

紅蓮之龍

发布： 2025-12-17 22:23:13

原创

940人浏览过

Immer通过Proxy实现“看似可变、实际不可变”的更新：包装原始状态为代理，记录变更，produce结束时生成结构共享的新对象，未修改部分复用原引用，确保不可变性与性能兼顾。

如何实现javascript不可变更新_immer库原理是什么？

JavaScript 中的不可变更新不是靠语言特性强制实现的，而是靠约定和工具辅助。直接修改对象或数组会破坏不可变性，而 Immer 用一种“看似可变、实际不可变”的方式，让开发者写起来像在改原对象，底层却自动产出新副本。

不可变更新的核心逻辑

不可变更新的本质是：不修改原始数据，而是返回一个结构共享（structural sharing）的新对象。关键点有三个：

原始对象完全保留，任何属性改动都发生在新对象上
未改动的部分复用原引用（节省内存和性能）
嵌套越深，手动深拷贝越麻烦，容易漏掉某一层

Immer 是怎么做到“写起来可变，实际不可变”的？

Immer 的核心是基于 Proxy 的代理机制（v9+ 默认使用 Proxy；旧版本 fallback 到递归遍历）。它把传入的原始状态包装成一个代理对象，在你对它做赋值、增删、push 等操作时，并不真正修改原对象，而是记录“草稿变更”，等 produce 执行结束，再基于原始数据 + 变更记录，生成最终的不可变新对象。

第一次读取某个属性时，Immer 自动将该属性也转为代理（惰性代理），只代理实际访问到的路径
只有被修改的叶子节点才创建新值，父级结构若没变，就复用原引用
底层用 Object.freeze 或严格模式防止误改 draft，确保安全

一个典型用法与等价的手动写法对比

比如要给用户列表中 id=123 的用户添加一个 lastLogin 字段：

腾讯AI 开放平台

腾讯AI开放平台

381

查看详情

立即学习“Java免费学习笔记（深入）”；

✅ Immer 写法（简洁、直观）：

import { produce } from 'immer';

const nextState = produce(currentState, draft => {
  const user = draft.users.find(u => u.id === 123);
  if (user) user.lastLogin = new Date();
});

登录后复制

❌ 手动不可变写法（易错、冗长）：

const userIndex = currentState.users.findIndex(u => u.id === 123);
if (userIndex === -1) return currentState;

const newUser = { ...currentState.users[userIndex], lastLogin: new Date() };
const nextUsers = [
  ...currentState.users.slice(0, userIndex),
  newUser,
  ...currentState.users.slice(userIndex + 1)
];
const nextState = { ...currentState, users: nextUsers };

登录后复制

Immer 的边界与注意事项

Immer 不是万能的，理解它的限制才能用得稳：

只对 plain object、array、Map、Set 等内置可代理类型生效；Date、RegExp、class 实例等不会被代理，需手动 clone
不能在 produce 回调里解构赋值再修改（如 const { name } = draft; name = 'x'），这改的是局部变量，不是 draft
不能在回调里把 draft 当普通对象传给外部函数并期望它被修改——必须在回调内直接操作 draft
异步操作（如 setTimeout 里改 draft）无效，因为 produce 同步执行完就生成结果了

基本上就这些。Immer 的价值不在“多强大”，而在“让不可变更新回归直觉”。它没改变 JS 的本质，只是把重复、易错的手动拷贝逻辑，封装进了一层轻量且可靠的代理层。

以上就是如何实现javascript不可变更新_immer库原理是什么？的详细内容，更多请关注php中文网其它相关文章！