Immer 生态图谱Built with Immer 项目全览与底层能力解析【免费下载链接】immerCreate the next immutable state by mutating the current one项目地址: https://gitcode.com/gh_mirrors/im/immer本指南以 Immer 官方文档「Built with Immer」页面为核心系统梳理构建在 Immer 之上的状态管理库、工具链与桌面应用并深入仓库源码解释这些项目选择 Immer 的根本原因——produce的写时复制copy-on-write、结构共享structural sharing、patches 补丁机制与 Map/Set 支持。读完本文你将掌握 Immer 生态的全景分布并能依据自身场景判断哪些库在什么层面复用了 Immer 的哪种能力。一、什么是 Built with ImmerBuilt with Immer 是 Immer 官方文档站中的一个生态展示页website/docs/built-with.md位于 Docusaurus 文档侧边栏的 Resources 分组之下见 website/sidebars.js。该页面罗列了以 Immer 为核心依赖构建的开源项目覆盖 Redux 工具链、React 状态管理、Angular/NgRx 插件、CRDT 协作数据层与桌面应用等方向是了解 Immer 实际影响力与技术适用面的第一手资料。Immer 本身的价值主张正如仓库 README 所言——Create the next immutable state by mutating the current one开发者以看似可变的方式直接修改草稿draftImmer 在幕后基于 Proxy 追踪修改并产出新的不可变状态。这种可变 API 不可变结果的体验正是大量状态管理库选择 Immer 作为底层引擎的原因。二、生态项目全景官方收录的完整清单原文档共收录了 14 个代表性项目并指向 npm 上所有依赖 Immer 的完整列表。以下按技术方向分类完整呈现描述来自官方文档原文2.1 Redux 生态让 Redux 开发更高效的脚手架与工具集redux-toolkit官方、意见明确、开箱即用的高效 Redux 开发工具集。Redux Toolkit 的createReducer与createSlice内部直接以 Immer 的produce作为 reducer 包装层。immer based handleActions为 Redux 提供零样板代码的 actions 处理方案。redux-box模块化且易于掌握的基于 Redux 的状态管理样板代码最少。quick-redux使 Redux 开发更快更容易的工具。robodux灵活减少 Redux 样板代码的脚手架。redux-ts-utils用 Redux 创建类型安全应用所需的一切强调简洁性。redux-immer创建与 immer 状态配合使用的combineReducers等价函数定位类似redux-immutable但基于 Immer。2.2 React 生态基于 Immer 的轻量状态方案react-copy-write具有可变 API 的不可变状态React Context 时代的先行者。bey使用 Immer 为 React 提供简单的不可变状态。immer-wieder结合 React 16 Context 与 Immer提供具备 Redux 语义的状态管理库。immer-reducer面向 React HooksuseReducer与 Redux 的 TypeScript 类型安全、简洁的 reducer 库。react-state-tree将状态持久化到类似 Redux 的状态树可作为useState的替代品。cool-store建立在 ImmerJS 和 RxJS 之上的不可变状态存储。2.3 Angular 生态NgRx 之上的轻量插件ngrx-wieder轻量且可配置的解决方案在 NgRx 与 Immer 之上为 Angular 应用实现撤销/重做undo-redo。2.4 协作数据与桌面应用Immer 的能力边界延伸immer-yjs将 Immer 与 CRDT 库 Yjs 结合实现简便的 JSON 数据操作。immerhin同步状态并支持撤销/重做。zenith基于 Immer 的响应式 React 状态管理支持 MobX 风格的计算属性与基于补丁的撤销/重做驱动 DOMD。domd高性能 macOS Markdown 编辑器构建于 Immer 的结构共享之上在大型文档上实现近 O(1) 的每次按键渲染。此外官方文档还指向 npm 上的完整依赖列表可通过 npm 的 depended 浏览功能查看所有直接依赖 Immer 的公开包作为上述清单的动态补充。三、这些项目为什么选择 Immer源码级能力拆解上述项目分布在不同框架与场景但都指向 Immer 的几个核心能力。我们可以从当前仓库源码逐一验证这些能力的实现位置与使用方式。3.1produce可变 API 产出不可变状态Redux 生态的核心引擎Redux Toolkit、redux-box、robodux 等库的共同点是让开发者编写直接修改 state的 reducer再由 Immer 代为完成不可变更新。这一能力由produce提供其定义位于 src/immer.tsexport const produce: IProduce /* __PURE__ */ immer.produce从 src/immer.ts 的注释可以确认其语义produce接收一个基础状态base与一个recipe 函数recipe 可以任意修改其第一个参数草稿所有修改都只会作用于 base 的副本之上当没有任何修改发生时返回原始状态。这正是状态管理库梦寐以求的行为reducer 代码看起来像可变写法实际仍保持不可变语义从而天然支持 Redux DevTools 的时间旅行调试。produce还支持只传函数以创建柯里化curriedproducer这也是 Redux 中先定义 reducer、后绑定 state惯用法的来源。3.2 结构共享与无操作检测避免无谓的重新渲染多个生态项目尤其是 React 类库依赖 Immer 的另一个特性如果 recipe 函数没有产生任何语义变更Immer 会返回原始状态而非新副本。这意味着引用相等性reference equality得以保持React 组件可以借助memo跳过无意义的重新渲染。官方性能文档 website/docs/performance.mdx 中明确提到Immer 检测到 no-op 修改时会返回原始状态已知有项目仅通过引入 Immer 就解决了严重的性能问题配合结构共享修改大对象中一小部分数据时未修改的分支会被复用这也是 domd 宣称近 O(1) 每次按键渲染的技术基础。3.3produceWithPatches与 patches 插件撤销/重做与协作同步的基石ngrx-wieder、immer-wieder、zenith、immerhin 等项目的共同卖点是 undo/redo。这一能力的底层是 Immer 的补丁patches机制produceWithPatches返回[nextState, patches, inversePatches]三元组src/immer.ts其中inversePatches即反向补丁回放即可撤销修改。需要注意的是补丁功能需要显式启用。当前仓库中通过插件系统提供入口位于 src/plugins/patches.ts并在 src/immer.ts 导出export {enablePatches} from ./plugins/patches从 src/plugins/patches.ts 可以看到该插件在非生产环境下还会注册若干错误提示例如 Set 不支持replace补丁、不支持未知补丁操作、不允许 patch 保留属性__proto__、prototype、constructor等为撤销/重做与状态同步提供了严谨的边界约束。immer-yjs 将 JSON 数据操作交给 Immer、再用补丁与 Yjs 的 CRDT 结构对齐同样是基于这套机制。3.4 Map/Set 支持复杂数据结构不在话下现代状态中Map与Set越来越常见而普通深拷贝库难以优雅处理它们。Immer 通过可选的 MapSet 插件补齐这一能力入口同样位于 src/immer.tsenableMapSet实现见 src/plugins/mapset.ts。redux-toolkit、redux-ts-utils 等追求开箱即用的库正因 Immer 对普通对象、数组、Map、Set 的统一处理而无需自造轮子。3.5 自动冻结与安全防护开发期防呆从 src/immer.ts 可见Immer 默认对所有产出的副本执行自动冻结setAutoFreeze默认开启且生产环境同样生效防止开发者意外修改状态树。redux-box、react-copy-write 等面向尽量减少样板代码场景的库直接继承了这一安全保证——不可变不只是约定而是被冻结强制执行的约束。四、从文档到源码如何验证与深入如果你想在本地验证上述论断可以在当前仓库中按以下路径追踪produce的完整定义与 API 家族src/immer.ts包含produce、produceWithPatches、applyPatches、createDraft/finishDraft、original、current、freeze、castDraft/castImmutable等全部公开 API 的导出。Proxy 草案与结构共享的实现src/core/proxy.ts 与 src/core/finalize.ts前者负责把 base 包装为可追踪的 Proxy后者在收尾阶段产出新副本并完成冻结。插件体系src/plugins/patches.ts、src/plugins/mapset.ts、src/plugins/arrayMethods.ts对应补丁、Map/Set、数组方法三个可选能力。测试用例tests/patch.js 覆盖补丁与撤销/重做行为tests/map-set.js 覆盖 Map/Set 场景tests/redux.ts 直接演示了 Immer 与 Redux 生态的配合方式如 undo/redo 示例可视为生态库用法的官方级参考。性能基准performance_tests/todo.mjs 模拟 5 万个 todo 项中更新 5 千项的典型场景官方性能文档 website/docs/performance.mdx 总结了Proxy 实现约为手写 reducer 的 2~3 倍慢实践中可忽略、与 ImmutableJS 相当、生成补丁几乎不拖慢性能等关键结论可用yarn test:perf在本地复现。五、你的项目也可以 Built with Immer从上述清单可以看出Immer 生态覆盖了状态管理库Redux/React/Angular 各框架→ 协作数据层Yjs→ 应用级产品编辑器三个层级。官方在 readme.md 中也邀请所有因 Immer 获益的项目加入社区支持者名单。若你的项目同样以 Immer 为核心依赖可以遵循以下路径将项目加入官方 Built with Immer 页面按 website/docs/built-with.md 的既有条目格式附上项目链接与一句话描述若希望被更广泛的开发者发现可在 npm 上以 Immer 为依赖发布你的包它会自动出现在 Immer 的 depended 列表中官方页面亦会引导读者前往该列表浏览全部生态成员。结语Built with Immer 不仅仅是一份项目清单它揭示了 Immer 作为一个不可变状态基础设施的技术定位produce提供可变 API 与不可变结果的统一体验结构共享与 no-op 检测带来性能红利patches 机制支撑撤销/重做与协作同步Map/Set 与冻结能力则补齐了工程化所需的安全与类型边界。理解这些底层能力你就能像这些生态项目一样在正确的场景里把 Immer 用到刀刃上。【免费下载链接】immerCreate the next immutable state by mutating the current one项目地址: https://gitcode.com/gh_mirrors/im/immer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Immer 生态图谱：Built with Immer 项目全览与底层能力解析
Immer 生态图谱Built with Immer 项目全览与底层能力解析【免费下载链接】immerCreate the next immutable state by mutating the current one项目地址: https://gitcode.com/gh_mirrors/im/immer本指南以 Immer 官方文档「Built with Immer」页面为核心系统梳理构建在 Immer 之上的状态管理库、工具链与桌面应用并深入仓库源码解释这些项目选择 Immer 的根本原因——produce的写时复制copy-on-write、结构共享structural sharing、patches 补丁机制与 Map/Set 支持。读完本文你将掌握 Immer 生态的全景分布并能依据自身场景判断哪些库在什么层面复用了 Immer 的哪种能力。一、什么是 Built with ImmerBuilt with Immer 是 Immer 官方文档站中的一个生态展示页website/docs/built-with.md位于 Docusaurus 文档侧边栏的 Resources 分组之下见 website/sidebars.js。该页面罗列了以 Immer 为核心依赖构建的开源项目覆盖 Redux 工具链、React 状态管理、Angular/NgRx 插件、CRDT 协作数据层与桌面应用等方向是了解 Immer 实际影响力与技术适用面的第一手资料。Immer 本身的价值主张正如仓库 README 所言——Create the next immutable state by mutating the current one开发者以看似可变的方式直接修改草稿draftImmer 在幕后基于 Proxy 追踪修改并产出新的不可变状态。这种可变 API 不可变结果的体验正是大量状态管理库选择 Immer 作为底层引擎的原因。二、生态项目全景官方收录的完整清单原文档共收录了 14 个代表性项目并指向 npm 上所有依赖 Immer 的完整列表。以下按技术方向分类完整呈现描述来自官方文档原文2.1 Redux 生态让 Redux 开发更高效的脚手架与工具集redux-toolkit官方、意见明确、开箱即用的高效 Redux 开发工具集。Redux Toolkit 的createReducer与createSlice内部直接以 Immer 的produce作为 reducer 包装层。immer based handleActions为 Redux 提供零样板代码的 actions 处理方案。redux-box模块化且易于掌握的基于 Redux 的状态管理样板代码最少。quick-redux使 Redux 开发更快更容易的工具。robodux灵活减少 Redux 样板代码的脚手架。redux-ts-utils用 Redux 创建类型安全应用所需的一切强调简洁性。redux-immer创建与 immer 状态配合使用的combineReducers等价函数定位类似redux-immutable但基于 Immer。2.2 React 生态基于 Immer 的轻量状态方案react-copy-write具有可变 API 的不可变状态React Context 时代的先行者。bey使用 Immer 为 React 提供简单的不可变状态。immer-wieder结合 React 16 Context 与 Immer提供具备 Redux 语义的状态管理库。immer-reducer面向 React HooksuseReducer与 Redux 的 TypeScript 类型安全、简洁的 reducer 库。react-state-tree将状态持久化到类似 Redux 的状态树可作为useState的替代品。cool-store建立在 ImmerJS 和 RxJS 之上的不可变状态存储。2.3 Angular 生态NgRx 之上的轻量插件ngrx-wieder轻量且可配置的解决方案在 NgRx 与 Immer 之上为 Angular 应用实现撤销/重做undo-redo。2.4 协作数据与桌面应用Immer 的能力边界延伸immer-yjs将 Immer 与 CRDT 库 Yjs 结合实现简便的 JSON 数据操作。immerhin同步状态并支持撤销/重做。zenith基于 Immer 的响应式 React 状态管理支持 MobX 风格的计算属性与基于补丁的撤销/重做驱动 DOMD。domd高性能 macOS Markdown 编辑器构建于 Immer 的结构共享之上在大型文档上实现近 O(1) 的每次按键渲染。此外官方文档还指向 npm 上的完整依赖列表可通过 npm 的 depended 浏览功能查看所有直接依赖 Immer 的公开包作为上述清单的动态补充。三、这些项目为什么选择 Immer源码级能力拆解上述项目分布在不同框架与场景但都指向 Immer 的几个核心能力。我们可以从当前仓库源码逐一验证这些能力的实现位置与使用方式。3.1produce可变 API 产出不可变状态Redux 生态的核心引擎Redux Toolkit、redux-box、robodux 等库的共同点是让开发者编写直接修改 state的 reducer再由 Immer 代为完成不可变更新。这一能力由produce提供其定义位于 src/immer.tsexport const produce: IProduce /* __PURE__ */ immer.produce从 src/immer.ts 的注释可以确认其语义produce接收一个基础状态base与一个recipe 函数recipe 可以任意修改其第一个参数草稿所有修改都只会作用于 base 的副本之上当没有任何修改发生时返回原始状态。这正是状态管理库梦寐以求的行为reducer 代码看起来像可变写法实际仍保持不可变语义从而天然支持 Redux DevTools 的时间旅行调试。produce还支持只传函数以创建柯里化curriedproducer这也是 Redux 中先定义 reducer、后绑定 state惯用法的来源。3.2 结构共享与无操作检测避免无谓的重新渲染多个生态项目尤其是 React 类库依赖 Immer 的另一个特性如果 recipe 函数没有产生任何语义变更Immer 会返回原始状态而非新副本。这意味着引用相等性reference equality得以保持React 组件可以借助memo跳过无意义的重新渲染。官方性能文档 website/docs/performance.mdx 中明确提到Immer 检测到 no-op 修改时会返回原始状态已知有项目仅通过引入 Immer 就解决了严重的性能问题配合结构共享修改大对象中一小部分数据时未修改的分支会被复用这也是 domd 宣称近 O(1) 每次按键渲染的技术基础。3.3produceWithPatches与 patches 插件撤销/重做与协作同步的基石ngrx-wieder、immer-wieder、zenith、immerhin 等项目的共同卖点是 undo/redo。这一能力的底层是 Immer 的补丁patches机制produceWithPatches返回[nextState, patches, inversePatches]三元组src/immer.ts其中inversePatches即反向补丁回放即可撤销修改。需要注意的是补丁功能需要显式启用。当前仓库中通过插件系统提供入口位于 src/plugins/patches.ts并在 src/immer.ts 导出export {enablePatches} from ./plugins/patches从 src/plugins/patches.ts 可以看到该插件在非生产环境下还会注册若干错误提示例如 Set 不支持replace补丁、不支持未知补丁操作、不允许 patch 保留属性__proto__、prototype、constructor等为撤销/重做与状态同步提供了严谨的边界约束。immer-yjs 将 JSON 数据操作交给 Immer、再用补丁与 Yjs 的 CRDT 结构对齐同样是基于这套机制。3.4 Map/Set 支持复杂数据结构不在话下现代状态中Map与Set越来越常见而普通深拷贝库难以优雅处理它们。Immer 通过可选的 MapSet 插件补齐这一能力入口同样位于 src/immer.tsenableMapSet实现见 src/plugins/mapset.ts。redux-toolkit、redux-ts-utils 等追求开箱即用的库正因 Immer 对普通对象、数组、Map、Set 的统一处理而无需自造轮子。3.5 自动冻结与安全防护开发期防呆从 src/immer.ts 可见Immer 默认对所有产出的副本执行自动冻结setAutoFreeze默认开启且生产环境同样生效防止开发者意外修改状态树。redux-box、react-copy-write 等面向尽量减少样板代码场景的库直接继承了这一安全保证——不可变不只是约定而是被冻结强制执行的约束。四、从文档到源码如何验证与深入如果你想在本地验证上述论断可以在当前仓库中按以下路径追踪produce的完整定义与 API 家族src/immer.ts包含produce、produceWithPatches、applyPatches、createDraft/finishDraft、original、current、freeze、castDraft/castImmutable等全部公开 API 的导出。Proxy 草案与结构共享的实现src/core/proxy.ts 与 src/core/finalize.ts前者负责把 base 包装为可追踪的 Proxy后者在收尾阶段产出新副本并完成冻结。插件体系src/plugins/patches.ts、src/plugins/mapset.ts、src/plugins/arrayMethods.ts对应补丁、Map/Set、数组方法三个可选能力。测试用例tests/patch.js 覆盖补丁与撤销/重做行为tests/map-set.js 覆盖 Map/Set 场景tests/redux.ts 直接演示了 Immer 与 Redux 生态的配合方式如 undo/redo 示例可视为生态库用法的官方级参考。性能基准performance_tests/todo.mjs 模拟 5 万个 todo 项中更新 5 千项的典型场景官方性能文档 website/docs/performance.mdx 总结了Proxy 实现约为手写 reducer 的 2~3 倍慢实践中可忽略、与 ImmutableJS 相当、生成补丁几乎不拖慢性能等关键结论可用yarn test:perf在本地复现。五、你的项目也可以 Built with Immer从上述清单可以看出Immer 生态覆盖了状态管理库Redux/React/Angular 各框架→ 协作数据层Yjs→ 应用级产品编辑器三个层级。官方在 readme.md 中也邀请所有因 Immer 获益的项目加入社区支持者名单。若你的项目同样以 Immer 为核心依赖可以遵循以下路径将项目加入官方 Built with Immer 页面按 website/docs/built-with.md 的既有条目格式附上项目链接与一句话描述若希望被更广泛的开发者发现可在 npm 上以 Immer 为依赖发布你的包它会自动出现在 Immer 的 depended 列表中官方页面亦会引导读者前往该列表浏览全部生态成员。结语Built with Immer 不仅仅是一份项目清单它揭示了 Immer 作为一个不可变状态基础设施的技术定位produce提供可变 API 与不可变结果的统一体验结构共享与 no-op 检测带来性能红利patches 机制支撑撤销/重做与协作同步Map/Set 与冻结能力则补齐了工程化所需的安全与类型边界。理解这些底层能力你就能像这些生态项目一样在正确的场景里把 Immer 用到刀刃上。【免费下载链接】immerCreate the next immutable state by mutating the current one项目地址: https://gitcode.com/gh_mirrors/im/immer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考