ReactJS101 项目中的 ImmutableJS 核心概念与实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01176/article/details/148527178

ReactJS101 项目中的 ImmutableJS 核心概念与实战指南

reactjs101 kdchang/reactjs101: 是一个关于 ReactJS 的前端开发教程项目。适合对前端开发有兴趣的人，特别是想学习 ReactJS 框架的人。特点是从基础概念和示例代码入手，逐步深入到 ReactJS 的各种高级特性，具有较强的实践性和指导性。项目地址: https://gitcode.com/gh_mirrors/re/reactjs101

什么是 ImmutableJS？

ImmutableJS 是 Facebook 开发的一个 JavaScript 库，它提供了一系列不可变（Immutable）的数据结构。在 JavaScript 中，对象（Object）是可变（Mutable）的，这意味着当你修改一个对象时，原始对象也会被改变。ImmutableJS 通过提供不可变的数据结构解决了这个问题。

为什么需要 ImmutableJS？

JavaScript 的可变性问题

在 JavaScript 中，对象是通过引用传递的，这会导致一些意外的行为：

const obj1 = { a: 1 };
const obj2 = obj1;
obj2.a = 2;
console.log(obj1.a); // 输出 2，原始对象也被修改了

传统解决方案的局限性

传统的解决方案是使用深拷贝（deepCopy），但这会带来性能问题，因为每次修改都需要复制整个数据结构。

ImmutableJS 的核心特性

1. 持久化数据结构（Persistent Data Structure）

ImmutableJS 的数据结构一旦创建就不能被修改。任何修改操作都会返回一个新的数据结构，而原始数据保持不变。

import { Map } from 'immutable';

const map1 = Map({ a: 1, b: 2 });
const map2 = map1.set('a', 3);

console.log(map1.get('a')); // 1
console.log(map2.get('a')); // 3

2. 结构共享（Structural Sharing）

ImmutableJS 在修改数据时，会共享未修改的部分，而不是复制整个数据结构。这大大提高了性能。

const obj = {
  count: 1,
  list: [1, 2, 3, 4, 5]
};
const map1 = Immutable.fromJS(obj);
const map2 = map1.set('count', 4);

console.log(map1.list === map2.list); // true，list 被共享

3. 惰性操作（Lazy Operation）

ImmutableJS 支持惰性求值，这在处理大数据集时特别有用。

Immutable.Range(1, Infinity)
  .map(n => -n)
  .take(2)
  .reduce((r, n) => r + n, 0); 
// 输出 -3，不会因为无限序列而崩溃

ImmutableJS 的主要数据结构

1. Map（键值对集合）

const map1 = Map({ a: 1, b: 2 });
const map2 = map1.set('a', 3);
const map3 = map1.delete('b');
const map4 = map1.merge(Map({ c: 3 }));

2. List（有序列表）

const list1 = List([1, 2, 3]);
const list2 = list1.push(4);
const list3 = list1.set(0, 10);
const list4 = list1.delete(1);

3. Set（无序唯一集合）

const set1 = Set([1, 2, 3]);
const set2 = set1.add(4);
const set3 = set1.delete(2);
const set4 = set1.union(Set([3, 4, 5]));

在 React 中的性能优化

ImmutableJS 可以显著提高 React 应用的性能，特别是在 shouldComponentUpdate 方法中：

shouldComponentUpdate(nextProps) {
  return !Immutable.is(this.props.data, nextProps.data);
}

与 PureRenderMixin 结合使用

import PureRenderMixin from 'react-addons-pure-render-mixin';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
  }
  
  render() {
    return <div>{this.props.immutableData.get('value')}</div>;
  }
}