Vue.js

Appearance

On this page

3. 不可变性：Ramda 的数据操作哲学 ​

在上一章，我们看到了纯函数如何通过返回一个全新的对象来避免修改原始数据。这个“不直接修改原始数据”的原则，就是函数式编程中另一个至关重要的概念——不可变性（Immutability）。

如果你使用过 React 或 Redux，你一定对这个概念不陌生。它们都强调，状态（State）是只读的，你永远不应该直接修改它，而是应该用一个新的状态来替换旧的状态。这正是不可变性思想在前端框架中的具体体现。

可变性：混乱的根源 ​

让我们先来看看“可变性”（Mutability）会带来什么问题。

想象一下，你正在开发一个购物车功能。你有一个 cart 对象，里面存放着用户选择的商品。现在，你想写一个函数，给购物车里的所有商品打九折。

一个直观但危险的实现可能是这样的：

javascript
const cart = {
  items: [
    { name: 'T-shirt', price: 20 },
    { name: 'Jeans', price: 50 }
  ],
  total: 70
};

// 一个“可变”的函数，它直接修改了传入的 cart 对象
function applyDiscount(cart) {
  cart.items.forEach(item => {
    item.price = item.price * 0.9; // 直接修改了 item 的 price
  });
  cart.total = cart.items.reduce((acc, item) => acc + item.price, 0); // 直接修改了 cart 的 total
  return cart;
}

const discountedCart = applyDiscount(cart);

console.log(discountedCart); // { items: [..., ...], total: 63 }
console.log(cart);           // { items: [..., ...], total: 63 }

问题出在哪里？

applyDiscount 函数像一个“不速之客”，闯入你家（cart 对象），把里面的东西（price 和 total）弄得乱七八糟。当你执行 applyDiscount(cart) 后，原始的 cart 对象也被永久地改变了。

这会导致一系列潜在的问题：

  • 不可预测性：代码的其他部分可能还依赖于原始的 cart 数据。现在它被神不知鬼不觉地修改了，很可能会引发难以追踪的 Bug。
  • 状态追踪困难：如果应用状态可以被任何函数随意修改，那么当出现问题时，你很难定位是哪个环节导致了状态的错误变化。
  • 性能优化困难：在现代前端框架中，框架需要知道数据是否发生了变化，以便决定是否重新渲染 UI。如果直接修改数据，框架很难高效地检测到变化。

不可变性：安全与可预测的保障 ​

现在，我们用“不可变”的思维方式来重构这个函数。核心原则是：永远不要修改原始数据，而是返回一个全新的、修改后的副本。

javascript
import { map, reduce } from 'ramda';

const cart = {
  items: [
    { name: 'T-shirt', price: 20 },
    { name: 'Jeans', price: 50 }
  ],
  total: 70
};

// 一个“不可变”的函数，它返回一个全新的 cart 对象
const applyDiscountImmutable = (cart) => {
  // 使用 map 创建一个新的 items 数组，每个 item 也是新的对象
  const newItems = map(item => ({
    ...item,
    price: item.price * 0.9
  }), cart.items);

  // 使用 reduce 计算新的 total
  const newTotal = reduce((acc, item) => acc + item.price, 0, newItems);

  // 返回一个全新的 cart 对象
  return {
    ...cart,
    items: newItems,
    total: newTotal
  };
};

const discountedCart = applyDiscountImmutable(cart);

console.log(discountedCart); // { items: [..., ...], total: 63 }
console.log(cart);           // { items: [..., ...], total: 70 } -> 原始 cart 保持不变！

在这个版本中，applyDiscountImmutable 函数是一个“绅士”。它没有修改原始的 cart 对象，而是创建并返回了一个全新的 discountedCart 对象。原始的 cart 对象安然无恙。

这就是不可变性的力量：

  • 代码更安全：数据是只读的，你不用担心它在你不知道的情况下被修改。
  • 调试更轻松：由于旧数据被完整地保留了下来，你可以很方便地比较新旧状态的差异，快速定位问题。这对于实现“时间旅行调试”（Time-travel debugging）等高级功能至关重要。
  • 性能优化：当数据是不可变的时，检测变化就变得非常简单和高效。你只需要比较新旧数据的引用（内存地址）是否相同即可。如果不同，说明数据发生了变化。这正是 React、Redux 等库实现高效 UI 更新的核心机制（浅比较）。

Ramda 如何拥抱不可变性？ ​

Ramda 的设计哲学完全拥抱了不可变性。几乎所有 Ramda 中用于操作数据（对象或数组）的函数，都不会修改原始数据，而是返回一个新的副本。

例如：

  • R.assoc：设置对象属性，返回一个新对象。
  • R.append：在数组末尾添加元素，返回一个新数组。
  • R.sort：对列表排序，返回一个排序后的新列表。

让我们用 Ramda 来进一步简化上面的购物车例子：

javascript
import { pipe, map, evolve, reduce } from 'ramda';

const cart = {
  items: [
    { name: 'T-shirt', price: 20 },
    { name: 'Jeans', price: 50 }
  ],
  total: 70
};

// 使用 Ramda 的 evolve 和其他函数来创建一个转换流水线
const applyDiscountRamda = pipe(
  // evolve 函数可以对对象的指定属性进行变换，并返回一个新对象
  evolve({
    items: map(evolve({ price: p => p * 0.9 })) // 对 items 数组中的每个对象的 price 属性进行变换
  }),
  // 接收上一步返回的新对象，计算新的 total
  cart => evolve({
    total: () => reduce((acc, item) => acc + item.price, 0, cart.items)
  }, cart)
);

const discountedCart = applyDiscountRamda(cart);

console.log(discountedCart);
console.log(cart); // 原始 cart 依然不变

这个例子展示了 Ramda 如何通过函数组合和内置的不可变操作，让我们能够用一种非常声明式和安全的方式来描述复杂的数据转换。

在函数式编程的世界里，数据就像一条河流，它顺着由函数组成的河道向前流动。我们不改变河流本身，只是在它流过时，引导它产生新的形态。这种对数据的尊重和保护，正是构建健壮、可维护应用系统的关键所在。

在 GitHub 上编辑此页