关于immutable及其在项目中的使用

一、什么是Immutable

Immutable是指一旦建立即不可变的数据，全部对Immutable对象进行的修改操做最终都会返回一个新的Immutable对象。其中实现的原理是持久化数据结构（Persistent Data Structure），即使用旧的数据建立新数据时保持旧的数据不变。

现有的Immutable库主要有三种：immutable、immer、seamless-immutable。

二、immutable.js

Facebook 工程师 Lee Byron 花费 3 年时间打造，与 React 同期出现，但没有被默认放到 React 工具集里（React 提供了简化的 Helper）。它内部实现了一套完整的 Persistent Data Structure，还有不少易用的数据类型。像 `Collection`、`List`、`Map`、`Set`、`Record`、`Seq`。有很是全面的`map`、`filter`、`groupBy`、`reduce``find`函数式操做方法。同时 API 也尽可能与 Object 或 Array 相似。https://zhuanlan.zhihu.com/p/20295971

immutable.js支持的数据类型主要有

（1）Map：键值对集合，对应于Object，相似ES6中的Map

（2）List：有序可重复列表，对应Array

（3）Set：无序不可重复列表

同时immutable还提供了丰富的API对数据进行操做，不论是简单的对象、数组仍是有嵌套结构的数据，都能快速地对数据进行修改

三、why immutable?

背景

与immutable相对应的即mutable（可变的），JavaScript中的数据都是可变的，尤为针对引用类型的数据，建立对象和数组后对其进行修改，返回仍是指向原对象的指针，这样的设计是出于节约内存的考虑。然而mutable带来的负做用也是明显的，实际react项目中的数据流日趋复杂，redux中维护的state已经不是简单的对象和数组，一般是多层嵌套的数据结构。在通过屡次action对state的操做后，结构复杂的state会变得难以控制，常常会引发一些自身state没有改变的组件从新渲染，这会对性能形成不小的影响，相比起来mutable节约内存的优势也就显得微不足道。

再者，redux中的reducer是纯函数，即在原始state的基础上返回一个新的state，而不是在旧的state上进行修改：

• Redux 的 combineReducers 方法 浅比较 它调用的 reducer 的引用是否发生变化。
• React-Redux 的 connect 方法生成的组件经过 浅比较根 state 的引用变化 与 mapStateToProps 函数的返回值，来判断包装的组件是否须要从新渲染

而要作到不可变数据结构，解决方案有**深拷贝、引入immutable数据。

深拷贝

深拷贝就是生成一份彻底相同，但没有地址共享的数据。这样作的代价一般是很是昂贵的，深拷贝的实现须要遍历数据的每一个节点，递归调用自身函数实现，而项目中须要操做的数据体量大，且多为深层嵌套的结构，这样作无疑会对性能形成严重损耗。因此深拷贝方案不可取！

immutable

immutable为了不深拷贝带来的性能损耗，采用结构共享（Structure share）实现对数据的独立拷贝。即若是对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。这样既能够用最小的代价实现对数据的独立拷贝，也不会对内存形成太大负担。

再者，shouldComponentUpdate是react项目优化中的一个重点。咱们在比较state和props后返回true or false判断组件是否须要从新渲染，这里也须要对每一个数据结构进行深层次的比较才能返回正确的结果，不然会形成组件没必要要的更新或者没有按照既定状况更新。针对这种状况immutable为咱们提供了immutable.is这个API，能够在性能较好的状况下实现immutable对象的深度比较。

因而可知，在项目中引入immutable是能够以较小代价优化性能的选择。

四、总结

immutable的优势

• 下降mutable带来的复杂度，实现数据的可追溯
• 节约内存（结构共享）
• 与函数式编程理念高度契合

缺点

• immutable.js库体积较大，引入项目会增长资源文件大小