immutable.js是react的创建团队与16年开发出的一个不可变数据数据类型。

这样我们在程序中就不用考虑每次对象的深浅拷贝,immutable有着高级的数据更改检测机制。我们可以通过他提供的API进行数据的更改,且每次都返回一个新的对象。避免了深拷贝带来的性能损耗,当其中一个数据节点发生改变后,更改的只有这个节点和他的父节点们,其他的节点数据进行共享。

React的渲染机制

当我们调用setState之后,无论我们是否真的改变了state中的状态,都会触发React的重新渲染机制(render),这是因为在react组件的shouldComponentUpdate生命周期中总是返回true,显然,这会影响浏览器的性能,我们可以通过在组件的shouldComponentUpdate生命周期中比较两次state的数据来判断我们是否要重新渲染,但是如果我们的state层级比较深,那样的话比较起来就会很麻烦。

Immutable可以解决这个问题,因为immutable是不可变的数据类型,每次操作后都会返回一个新的对象,这个地大大减少我们diff的过程,只需要比较两个数据对象的引用地址是否相同就可以判断数据是否发生了改变。

节省内存

我们通过Immutable.Map函数来创建一个Immutable数据类型,对于数据的更改需用通过它内置的API来实现,例如下面的代码

  1. let a = Immutable.Map({
  2. select: 'user_a',
  3. filter: Immutable.Map({ name: 'Cam' })
  4. })
  5. let b = a.set('select', 'user_b');
  6. a === b; // false
  7. a.get('filter') === b.get('filter'); // true

我们通过改变set方法改变a的数据再赋值给变量b,这个时候a的数据是没有发生改变的,我们只是把a的数据改变后存在了一个新的对象中赋值给了b,同时我们会发现,对于a中没有改变的数据,b会尽可能的复用,例如a中的filter属性的值是一个引用类型,在我们将a赋值给b后,b中的filter引用的是和a相同的地址,这样做,节省性能和内存。

缺点

学习Immutable会增加我们的学习成本

Immutable侵入性强,对于一些第三方库,我们可能不得不将Immutable类型的数据转换成原生JS类型的数据,而这个转换的过程非常消耗性能,并且也不方便

容易与原生混淆,因为Immutable的一些API与原生几乎一样,但是作用的使用方法可能并不相同,我们在使用时可能就会与原生数据类型的API记混淆了