Immutable.js简介
引子
看一段大家熟悉的代码
const state = {
str: 'wwming',
obj: {
y: 1
},
arr: [1, 2, 3]
}
const newState = state
console.log(newState === state) // true
newState和state是相等的
原因： 由于js的对象和数组都是引用类型。所以newState的state实际上是指向于同一块内存地址的, 所以结果是newState和state是相等的。
尝试修改一下数据
const state = {
str: 'wwming',
obj: {
y: 1
},
arr: [1, 2, 3]
}
const newState = state
newState.str = 'wwming is cool'
console.log(state.str, newState.str) // wwming is cool wwming is cool
可以看到，newState的修改也会引起state的修改。
如何解决？
js中提供了另一种修改数据的方式，要修改一个数据之前先制作一份数据的拷贝，像这样
const state = {
str: 'wwming',
obj: {
y: 1
},
arr: [1, 2, 3]
}
const newState = Object.assign({}, state)
newState.str = 'wwming is cool'
console.log(state.str, newState.str)
可以使用很多方式在js中复制数据，比如:
- Object.assign,
- Object.freeze,
- slice,
- concat,
- map,
- filter,
- reduce
等方式进行复制，但这些都是浅拷贝，就是只拷贝第一层数据。
更深层的数据还是同一个引用，比如：
const state = {
str: 'wwming',
obj: {
y: 1
},
arr: [1, 2, 3]
}
const newState = Object.assign({}, state)
newState.obj.y = 2
newState.arr.push(4)
console.log(state, newState)
// 执行结果
{
"str": "wwming",
"obj": {
"y": 2
},
"arr": [
1,
2,
3,
4
]
}
{
"str": "wwming",
"obj": {
"y": 2
},
"arr": [
1,
2,
3,
4
]
}
可以看到，当在更改newState更深层次的数据的时候，还是会影响到state的值。
如果要深层复制，就得一层一层的做 递归拷贝，这是一个复杂的问题。
虽然有些第三方的库已经帮我们做好了，比如lodash的cloneDeep方法。深拷贝是非常消耗性能的。
import { cloneDeep } from 'lodash'
const state = {
str: 'wwming',
obj: {
y: 1
},
arr: [1, 2, 3]
}
const newState = cloneDeep(state)
newState.obj.y = 2
newState.arr.push(4)
console.log(state, newState)
解决这个问题，就引出了 不可变数据(Immutable Data？)
什么是不可变数据 (Immutable Data)？
Immutable data encourages pure functions (data-in, data-out) and lends itself to much simpler application development and enabling techniques from functional programming such as lazy evaluation.
– 官方文档对其描述
Immutable Data 就是 一旦创建，就不能再被更改的数据。
对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。
Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。
同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。
更多精彩内容，请微信搜索“前端爱好者“， 戳我 查看 。
immutable.js的优缺点
优点：
- 降低mutable带来的复杂度
- 节省内存
- 历史追溯性（时间旅行）：时间旅行指的是，每时每刻的值都被保留了，想回退到哪一步只要简单的将数据取出就行，想一下如果现在页面有个撤销的操作，撤销前的数据被保留了，只需要取出就行，这个特性在redux或者flux中特别有用
- 拥抱函数式编程：immutable本来就是函数式编程的概念，纯函数式编程的特点就是，只要输入一致，输出必然一致，相比于面向对象，这样开发组件和调试更方便。推荐一本函数式编程的在线免费书《JS 函数式编程指南》, 此书可以推荐给学生做为课外补充阅读。
缺点：
- 需要重新学习api
- 资源包大小增加（源码5000行左右）
- 容易与原生对象混淆：由于api与原生不同，混用的话容易出错。
----------------------- 优点 -------------------
降低mutable带来的复杂度
共享的可变状态是万恶之源，举个简单的例子就是js中的引用赋值：
var obj = { a: 1 };
var copy_obj = obj;
copy_obj.a = 2;
console.log(obj.a); // 2
引用赋值虽然可以节省内存，但当应用复杂之后，可变状态往往会变成噩梦.
通常一般的做法是使用shallowCopy或者deepCopy来避免被修改，但这样造成了CPU和内存的消耗.
Immulate可以很好地解决这些问题。
节省内存空间
上面提到了结构共享，Immutable.js 使用这种方式会尽量复用内存，甚至以前使用的对象也可以再次被复用。
没有被引用的对象会被垃圾回收。
import { Map } from 'immutable';
let a = Map({
select: 'users',
filter: Map({ name: 'Cam' })
})
let b = a.set('select', 'people');
a === b; // false
a.get('filter') === b.get('filter'); // true
上面 a 和 b 共享了没有变化的 filter 节点。
Undo/Redo，Copy/Paste，随意穿越！
因为每次数据都是不一样的，只要把这些数据放到一个数组里储存起来，想回退到哪里就拿出对应数据即可，很容易开发出撤销重做这种功能。
拥抱函数式编程
Immutable（持久化数据结构）本身就是函数式编程中的概念。
函数式编程关心数据的映射，命令式编程关心解决问题的步骤，纯函数式编程比面向对象更适用于前端开发。
因为只要输入一致，输出必然一致，这样开发的组件更易于调试和组装。
----------------------- 缺点 -------------------
需要重新学习api
资源包大小增加（源码5000行左右）
容易与原生对象混淆：由于api与原生不同，混用的话容易出错
主要是Immutable的API设计的和原生对象类似，容易混淆操作。
例如其中Map和List的操作：
// Immutable
const map = Map({ a: 1, b: 2 });
const list = List([1,2,3]);
// 原生js
const obj = { a: 1, b: 2 };
const arry = [1,2,3];
// 取值方式对比
console.log(map.get('a'));
console.log(list.get(0));
console.log(obj.a);
console.log(arry[0]);
参考文档：
- https://blog.csdn.net/weixin_44216510/article/details/118073411
- https://zhuanlan.zhihu.com/p/101534155