从源码解读 Immer：揭秘 Immutable 数据操作

2024-01-31 11:33:51

在现代 JavaScript 应用开发中，处理可变数据会遇到诸多挑战。Immer 应运而生，旨在通过提供一种高效且直观的不可变数据操作方法，解决这一难题。本文将深入剖析 Immer 源码，探索其核心函数和工作原理，帮助开发者理解如何利用 Immer 管理不可变数据。

了解 Immer

Immer 是一个 JavaScript 库，它允许开发者使用常规的赋值和修改操作来更新对象和数组，而不用担心意外地突变原始数据。这对于构建响应式应用、维护状态管理以及确保数据一致性至关重要。

Immer 的核心：produce 函数

Immer 的核心是 produce 函数。它接收一个函数作为参数，该函数被应用于传入的状态副本。produce 函数确保在函数执行期间任何对副本的修改都不会影响原始状态。

1. 代理模式：

produce 函数使用代理模式。它创建原始状态的一个代理对象，并拦截所有对该代理对象的属性访问和修改。当开发者尝试修改代理对象时，Immer 会自动创建一个副本，在副本上应用修改，然后返回新副本。

2. 草稿模式：

produce 函数还支持草稿模式。当开发者传递一个对象作为参数时，Immer 会创建一个不可变的草稿对象。开发者可以在草稿对象上进行修改，而不用担心影响原始对象。一旦开发者对草稿对象满意，他们可以通过调用 produce 函数的 apply 方法将修改应用到原始对象。

剖析 produce 函数

在源代码中，produce 函数接受两个参数：

baseState：原始不可变状态。
recipe：一个接收草稿状态并返回新状态的函数。

函数返回一个元组，其中第一个元素是更新后的状态，第二个元素是基准比较函数（用于比较原始状态和更新后的状态）。

示例用法

const originalState = { count: 0 };

// 使用 produce 函数创建代理对象并更新状态
const updatedState = produce(originalState, (draft) => {
  draft.count++;
});

// 打印更新后的状态
console.log(updatedState); // { count: 1 }

// 打印原始状态（未受影响）
console.log(originalState); // { count: 0 }