Lz blog

Appearance

Immutable ​

Immutable 保证了在改变数据结构后，会生成新的数据结构。这就避免了React中两个数据之间的深层对比，减少性能开销。

不可变数据结构（Immutable Data Structures）是指一旦创建，其内容不能被直接修改的数据结构。任何对数据的“修改”操作（如添加、删除、更新）都会生成一个全新的副本，而原始数据保持不变。这种特性使得数据在程序中的变化更加可控和可预测。

为什么需要不可变数据结构？ ​

在 JavaScript 中，对象和数组等默认是可变的（Mutable），例如：

javascript
const obj = { a: 1 };
obj.a = 2; // 直接修改了原对象

这样的可变性可能导致以下问题：

  1. 副作用（Side Effects）：数据可能在多个地方被意外修改，导致难以追踪的 Bug。
  2. 性能问题：深拷贝大对象来保证不可变性会消耗大量内存和计算资源。
  3. 状态管理困难：在复杂应用（如 React 状态更新、Redux）中，追踪变化需要显式对比新旧数据。

Immutable.js 的解决方案 ​

Immutable.js 提供了高效的不可变数据结构（如 List、Map、Set 等），并通过 Structural Sharing（结构共享） 解决性能问题：

Structural Sharing 的原理 ​

  • 当修改一个不可变数据时，只复制受影响的部分，未修改的部分会被新旧数据共享引用。
  • 这类似于 Git 的提交历史：每次修改生成一个新版本，但不同版本共享未变动的部分。

示例： 假设有一个深层嵌套的对象：

javascript
const data = { 
  a: { x: 1 }, 
  b: { y: 2 }, 
  c: { z: 3 } 
};

如果修改 b.y 为 3，Immutable.js 会：

  1. 创建一个新对象，复制 b 的引用路径（生成新 b）。
  2. 共享未修改的 a 和 c，而不是深拷贝整个对象。

这样既保证了不可变性，又避免了不必要的内存开销。

Immutable.js 的核心优势 ​

  1. 无副作用：数据变更明确，避免意外修改。
  2. 高效更新：通过结构共享减少内存占用和计算成本。
  3. 简化复杂逻辑：在 React、Redux 等场景中，能快速对比新旧状态（只需比较引用地址，无需深比较）。

代码示例 ​

javascript
import { Map } from 'immutable';

// 创建一个不可变 Map
const map1 = Map({ a: 1, b: 2 });
const map2 = map1.set('b', 3); // 生成新对象，原 map1 不变

console.log(map1.get('b')); // 2
console.log(map2.get('b')); // 3

不可变数据结构的应用场景 ​

  1. React 状态更新：通过 setState 或 Hooks 更新状态时，确保不可变性以避免渲染问题。
  2. Redux 的 Reducers：始终返回新状态对象，而不是修改原状态。
  3. 并发编程：在异步操作中避免数据竞争（尽管 JS 是单线程，但异步逻辑仍需谨慎处理数据变更）。

总结 ​

  • 不可变数据结构：数据创建后不可修改，任何变更生成新对象。
  • Structural Sharing：通过共享未修改部分，实现高效的内存和性能优化。
  • Immutable.js：为 JS 提供了此类数据结构，适用于任何框架，尤其在需要可预测状态管理的场景中至关重要。