前言

首先，要想由浅入深了解清楚不可变数据（immutable data），我们应先回答下这几个问题：

何为可变数据？何为不可变数据？数据的区别？和react的关系？纯函数？

数据类型

对于JavaScript而言，数据主要分为基本类型和引用类型这两大类。

• 7种原始类型：Number、String、Boolean、Null、Undefined、Symbol、BigInt
• Object引用类型：Array、Object、Date等，几乎所有通过 new 创建的，即构造函数类型

基本类型不存在变化的特性，可以认为属于不可变数据。

JavaScript 中的对象一般是可变的（Mutable），因为使用了引用赋值，新的对象简单的引用了原始对象，改变新的对象将影响到原始对象。

• 这样做的好处是可以节约内存，但当应用复杂后，这就造成了非常大的隐患，Mutable 带来的优点变得得不偿失。
• 为了解决这个问题，一般的做法是使用 shallowCopy（浅拷贝）或 deepCopy（深拷贝）来避免被修改，但这样做又造成了 CPU 和内存的浪费。

JS数据类型的详细说明可见我的这篇文章彻底搞懂JS类型、类型判断、类型转换

Immutable 可以很好地解决这些问题。

什么是 Immutable Data

Immutable Data 就是一旦创建，就不能再被更改的数据。

• 对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。
• Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。
• 同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。

第三方库分析

immer vs immutable

和react的关系

资料

• Immutable 详解及 React 中实践
• 关于React Hooks和Immutable性能优化的实践，我写了一本掘金小册