Immutable
Immutable是什么?
Immutable
是不可改变的,是指一旦创建就不能再被更改的数据。
对Immutable
对象的任何修改或添加删除操作都会返回一个新的Immutable
对象。当数据被修改时,会返回一个新的对象,但新的对象会尽可能地利用之前的数据结构而不会对内存造成浪费。
也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变,同时为了避免深拷贝把所有节点都复制一遍带来的性能损耗,Immutable
使用了结构共享。如果对象树中的节点发生变化,只修改这个节点和受它影响的父节点,其他节点则进行共享。
如何使用
- fromJS():将
JS
数据转换为Immutable
数据 - toJS():将
Immutable
数据转换为JS
数据 - get(key):对数据或对象取值
- getIn([]):对嵌套对象或数组取值,传参为数组,表示位置
在React中的应用
在做react
性能优化时,为了避免重复渲染,我们会在shouldComponentUpdate
中进行对比。而Immutable通过is方法就可以进行对比,无需像
Immutable的优点
- 状态可变存在这样的问题,假如一个对象我在 a 方法进行了改变,在 b 方法中使用的时候可能 b 方法并不知道对象发生了改变因此可能会造成不可预期的问题,而对于 immutable 而言则不存在这样的问题,能够很好的对数据进行回溯,降低了 mutable 状态可变带来的复杂度
function touchAndLog(touchFn) {
let data = { key: 'value' };
touchFn(data);
console.log(data.key); // 猜猜会打印什么?
}
在不查看 touchFn 的代码的情况下,因为不确定它对 data 做了什么,因此并不能确定会打印什么。但如果 data 是Immutable 的呢,你可以很肯定的知道打印的是 value 。
- 节省内存:Immutable使用结构共享,会尽量复用内存,没有被引用的对象会被垃圾回收,在react中需要通过setState修改一个对象,假如这个对象只有一个节点发生变化了,那么传统的做法需要依次递归的拷贝对象中的每一个节点;而Immutable只会拷贝修改的节点和它的父节点,其它节点会进行共享,大大减少了内存的浪费。