1. immer
immer
是一个 JavaScript 库,用于处理不可变数据的状态更新。不可变数据意味着一旦创建,数据结构就不能被修改。在编写复杂的应用程序时,不可变性可以带来一系列好处,比如更容易追踪数据的改变、更容易实现撤销/重做功能以及更简单的状态管理。
然而,处理不可变数据结构通常需要编写大量的样板代码,尤其是在更新嵌套结构时。immer
库通过提供一个简单的可变(mutable)API 来更新不可变(immutable)状态,从而简化了这一过程。
immer
的核心概念是“草稿状态”(draft state)。这个库允许你编写看似可变的代码来更新一个不变的状态,但实际上,你是在修改的一个临时的草稿状态。一旦修改完成,immer
会基于这个草稿状态产生一个新的不可变状态。
2. 诞生背景
immer
的诞生背景主要与在 JavaScript 应用中管理复杂的不可变状态有关。在 React 和 Redux 等现代前端框架和库中,不可变数据的概念非常重要,因为它帮助开发者避免直接修改状态,从而避免潜在的副作用和性能问题。不可变数据还使得状态的变化更加可预测,便于跟踪和调试,同时也简化了复杂的功能如时间旅行(time travel debugging)和状态快照的实现。
React 的 setState
方法和 Redux 的 reducer 函数都要求你返回一个新的状态对象,而不是修改原有的状态。当状态结构简单时,这通常不是问题,但当应用逐渐变得复杂,状态结构也变得更加嵌套时,更新状态会变得越来越繁琐。例如,如果你需要更新一个嵌套的数组或对象,你需要逐层克隆所有父级对象,直到达到你想要修改的属性。这不仅编写起来复杂,而且容易出错。
为了解决这个问题,Michel Weststrate(也是 MobX 库的作者)创建了 immer
。他的目标是创建一个库,它能够让你以一种更自然和声明式的方式更新不可变状态,同时避免手动处理复杂的对象和数组克隆操作。通过 immer
,你可以继续编写简单直观的可变代码,但是产生的结果是按照不变性原则处理的,这样就既保持了代码的简洁,也确保了状态的不可变性。
简而言之,immer
的诞生背景是为了解决在处理复杂不可变状态时的编码复杂性问题,同时帮助开发者避免常见的不可变数据操作错误,提高代码的可维护性和可读性。
3. immer 对象克隆算法的简单实现
immer
库使用了一种称为结构共享的技术来实现对象克隆,这种技术可以有效地创建新的不可变状态,同时尽可能地重用旧状态中未修改的部分。下面是一个简化版的 immer
克隆算法的实现,用于展示其基本原理:
function createDraft(initialState) {// 遍历对象,递归地将其属性转化为可写。function createProxy(state) {if (typeof state === "object" && state !== null) {return new Proxy(state, {get(target, prop) {if (prop === "isDraft") return true;return createProxy(target[prop]);},set(target, prop, value) {target[prop] = value;return true;},});}return state;}return createProxy(initialState);
}function finishDraft(draft) {// 遍历对象的草稿版本,并递归地生成最终的不可变状态。function finalize(state) {