一文带你搞懂 Mutable 与 Immutable

Yuhano
675 阅读9分钟

报纸墙 萨勒芬妮4K高清壁纸-墨鱼部落格.jpg 在编程中，"mutable" 和 "immutable" 是描述数据结构或对象属性的术语。它们区分了对象是否可以在创建后被修改。

定义

Mutable (可变)

一个对象或数据结构是可变的，如果在创建后可以直接修改其状态或内容，修改可以包括添加、删除或更改对象的内容。

示例:

  • JavaScript 中的数组 (Array) 和对象 (Object) 是可变的。
  • Python 中的列表 (list) 和字典 (dict) 也是可变的。

特点:

  • 更改原对象不需要重新分配内存空间。
  • 可以直接通过索引或键值来修改元素。
  • 更改可能会影响共享相同引用的其他变量或对象。

优缺点:

  • 优点: 更加灵活，可以方便地修改数据。

  • 缺点: 更难维护，容易引发意外的副作用，尤其是在多线程或多进程环境中。

Immutable (不可变)

一个对象或数据结构是不可变的，一旦创建就不能修改其状态或内容。对不可变对象的任何修改都会产生一个新的对象，而不是改变原有对象。

示例:

  • JavaScript 中的字符串 (String) 和数字 (Number) 是不可变的。
  • Python 中的字符串 (str) 和元组 (tuple) 也是不可变的。

特点:

  • 修改原对象会导致创建一个新的对象。
  • 更改不会影响共享相同引用的其他变量或对象。
  • 通常具有更好的线程安全性，因为它们不会被多个线程并发修改。

优缺点:

  • 优点: 更易于理解和调试，更适合多线程环境，可以简化并发编程。

  • 缺点: 创建新对象可能会消耗更多内存，尤其是频繁修改时。

Immutable 在 React 中的应用

在React中，使用不可变数据结构可以帮助提高应用程序的性能和可预测性。不可变数据结构意味着一旦创建就不能更改其状态，所有的修改都会产生一个新的实例。这在React中特别有用，因为React通过比较组件的状态和属性来决定是否需要重新渲染组件。不可变数据在React中的几个主要应用方面：

1. 性能优化

  • 浅比较: React使用浅比较（即引用比较）来检测状态或属性的变化。如果状态是不可变的，那么React只需要简单地比较对象的引用即可知道状态是否发生变化。这比深入比较对象的每个属性要快得多。
  • 减少不必要的渲染: 如果状态没有变化，React就不会重新渲染组件。不可变数据使得这种检查更加可靠，因为只要引用相同，就意味着状态未变。

2. 简化状态管理

  • 易于调试: 不可变数据使得状态的变化更加可预测，因为每个状态变更都会生成一个新的对象实例。这使得追踪状态的变化更加容易。
  • 避免意外的副作用: 由于状态不能被修改，所以不用担心某个地方不经意地改变了状态，从而导致难以预料的行为。

3. 提高可读性和可维护性

  • 清晰的意图: 使用不可变数据可以明确地表达出状态不应该被修改的意图，这有助于其他开发者理解代码。
  • 减少错误: 由于不可变数据不能被意外修改，因此可以减少由意外状态更改引起的错误。

4. 库支持与例程

**Immutable.js **这是一个流行的JavaScript库，专门用于处理不可变数据。它提供了丰富的API来创建和操作不可变集合，如 Map, List, Set 等。 假设我们有一个React组件，它需要管理一个用户的列表，并且我们想要使用不可变数据来优化性能。以下是例程，我们一起来看一下：

import React, { useState } from 'react';
import { List } from 'immutable';

function UserList() {
  const [users, setUsers] = useState(List.of('Alice', 'Bob', 'Charlie'));

  const addUser = (name) => {
    setUsers(users.push(name));
  };

  return (
    <div>
      <ul>
        {users.map((user, index) => (
          <li key={index}>{user}</li>
        ))}
      </ul>
      <button onClick={() => addUser('David')}>Add David</button>
    </div>
  );
}

export default UserList;

在这个例子中，我们使用了 immutable.js 的 List 来存储用户列表。当点击按钮添加新用户时，我们使用 push 方法来添加新的用户名，这会产生一个新的 List 实例，而原来的 List 实例保持不变。因此，React可以轻松地通过比较引用来检测状态是否发生变化，并决定是否需要重新渲染组件。

Mutable 与 Immutable 在状态管理库中的应用

在讨论状态管理库时，我们可以从多个角度对其进行分类。其中的一种分类方法就是根据状态的可变性分为 Mutable（可变）与Immutable（不可变）。

  • Mutable：Mbox、valtio、...
  • Immutable：Zustand、Redux、Jotai、...

Mutable

创建对象之后任何状态更新都是基于对原先对象的基础之上进行的，典型的代表有 MobX、Valtio，例如：

// Valtio
import { proxy, useSnapshot } from 'valtio';

const state = proxy({
  count: 0,
});

export default function App() {
  const snapshot = useSnapshot(state);

  return (
    <div>
      <div>{snapshot.count}</div>
      <button onClick={() => (state.count += 1)}>+1</button>
    </div>
  );
}

在这个例子中我们可以看到，在点击按钮后会直接在原始状态上进行修改来完成状态的更新，即 state.count += 1。

Immutable

对象一旦创建就不能被修改，需要基于这个对象生成新的对象而保证原始对象不变。例如：

// Zustand
import { create } from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

export default function App() {
  const { count, increment } = useStore();

  return (
    <div>
      <div>{count}</div>
      <button onClick={increment}>Add</button>
    </div>
  );
}

在这个例子中我们可以看到，对于 Immutable 模型的状态管理库而言，不能直接在原先的对象上修改，而是需要生成一个新的对象，包含了修改后的 count 值。

当然，上面演示的例子中数据结构非常简单，我们可以举一个更加复杂的、多层嵌套的对象：

const state = {
  deep: {
    nested: {
      counter: {
        num: 1,
      },
    },
  },
}

对于这样的数据结构来说，以 Mutable 和 Immutable 方式分别应该如何来更新状态呢？我们分别来看一下：

  • Mutable
// Valtio
<button onClick={() => (state.deep.nested.counter.num += 1)}>Add</button>
  • Immutable
// Zustand
increment: () =>
  set((state) => ({
    deep: {
      ...state.deep,
      nested: {
        ...state.deep.nested,
        counter: {
          ...state.deep.nested.counter,
          num: state.deep.nested.counter.num + 1,
        },
      },
    },
  })),

可以看到，对于复杂的多层嵌套的数据结构来说，Immutable方式处理起来非常麻烦，并且容易出错，而 Mutable方式则更加的自然和清晰。除此之外，基于 Mutable方案下的状态管理库内部基于 Proxy 来实现，会监听组件对于状态的使用情况，从而在更新状态时正确触发对应的组件完成 re-render，因此这种方案下我们可以认为性能默认就是最优的，不需要手动来优化。

介绍了这么多 Mutable 方案的优点，它可以自动帮助我们优化性能以及以一种更为自然和符合直觉的方式来更新状态，那么它有什么缺点呢？

Immutable 可以保证可预测性，而 Mutable 则难以保证这一点。举一个例子，比如说我们现在有一个购物车，包含了用户需要购买的商品，相对应的我们需要有一个函数来更新购物车：

// Immutable
function addToCart(cartItems, newItem) {
  return [...cartItems, newItem]; // 返回一个新的数组，不修改原始数组
}

// Mutable
function addToCart(cartItems, newItem) {
  cartItems.push(newItem); // 直接修改原始数组
}

可预测性指的是当状态发生变化时，这些变化是可以被追踪以及最终状态的更新结果是明确的。在上面的例子中，由于 Immutable 每次在更新购物车的时候都会返回一个新的数组，因此每次的更新操作不会影响到原先的状态。而 Mutable 方式则会直接修改原始的数组，当应用中不同的地方以不可预期的方式修改了这个状态，尤其是在复杂的应用中，最终这个状态可能会难以追踪，在遇到 Bug 时也难以排查。

选择 Mutable 还是 Immutable 数据，主要取决于你的具体需求、性能要求以及团队的编程风格。在实际应用中，很多项目可能会结合使用两种类型的数据，以达到最佳的平衡点。

Immer 一个革命性的库

Immer 是一个革命性的库，它极大简化了不可变（Immutable）状态处理的复杂性。让我们在使用诸如 Zustand、Jotai 等基于不可变（Immutable）方案的状态管理库时，可以以一种可变（Mutable）的风格编写状态更新逻辑，从而提高了代码的可读性和维护性，同时保留了 Immutable 的所有优势。

结合 Immer，上面的例子可以优化为：

increment: () => set((state) => produce(state, (draft) => { ++state.deep.nested.counter.num}))

整个过程可以大致分为三个阶段。 image.png

  1. 生成代理（Draft）：在这个过程中 Immer 会根据当前状态使用 Proxy 来为我们生成代理，这个代理允许我们以 Mutable 的方式修改对象，而不必担心直接改变原始状态。
  2. 修改代理（Draft）：在这个过程中可以自由地对代理对象进行修改。
  3. 返回更新后的状态：在完成修改后，Immer 会将这些变更应用到一个新的对象上，而不会改动到原始状态。

Immer 可以让我们以 Mutable 的风格来更新状态，在背后 Immer 会基于当前状态为我们生成一个副本（Draft），所有的操作在这个副本上进行，而不会改动到原先的状态，当完成了状态的更改后，Immer 会根据副本的修改为我们计算生成最终的状态。

为了更好地理解，我们来看一个例程：

const { produce } = require('immer')

const baseState = {
  deep: {
    nested: {
      obj: {
        count: 1,
      },
    },
    innerItems: ['item1', 'item2'],
  },
  items: [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
  ],
}
const modifiedState = produce(baseState, (draftState) => {
  draftState.deep.nested.obj.count = 2
})
console.log(
  '不会改动到原始的状态',
  baseState !== modifiedState,
  baseState.deep.nested.obj.count === 1,
) // true true
console.log(
  'modifiedState上count状态更新为2',
  modifiedState.deep.nested.obj.count === 2,
) // true
console.log(
  '没改动到的状态则会复用',
  baseState.items === modifiedState.items,
  baseState.deep.innerItems === modifiedState.deep.innerItems,
) // true true

用一个图来表示上面代码中 baseState 与 modifiedState 之间的关系：

image.png

可以看到，对于没有修改的对象，Immer 则会直接复用。

总结

  • 选择依据: 选择mutable还是immutable数据，主要取决于你的具体需求、性能要求以及团队的编程风格。
  • 混合使用: 在实际应用中，很多项目可能会结合使用两种类型的数据，以达到最佳的平衡点。例如，对于很少变化的数据结构，可以使用mutable形式；而对于频繁更新的数据，则采用immutable形式。
avatar
文章
阅读
粉丝