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); // 猜猜会打印什么？
}
1
2
3
4
5

在不查看 touchFn 的代码的情况下，因为不确定它对 data 做了什么，因此并不能确定会打印什么。但如果 data 是Immutable 的呢，你可以很肯定的知道打印的是 value 。

• 节省内存：Immutable使用结构共享，会尽量复用内存，没有被引用的对象会被垃圾回收，在react中需要通过setState修改一个对象，假如这个对象只有一个节点发生变化了，那么传统的做法需要依次递归的拷贝对象中的每一个节点；而Immutable只会拷贝修改的节点和它的父节点，其它节点会进行共享，大大减少了内存的浪费。