facebook immutable.js

什么是Immutable Data

Immutable Data是指一旦被创造后，就不能够被改变的数据。

经过使用Immutable Data，可让咱们更容易的去处理缓存、回退、数据变化检测等问题，简化咱们的开发。

js中的Immutable Data

在javascript中咱们能够经过deep clone来模拟Immutable Data，就是每次对数据进行操做，新对数据进行deep clone出一个新数据。

deep clone

/**
 * learning-immutable - clone-deep.js
 * Created by mds on 15/6/6.
 */

'use strict';  
var cloneDeep = require('lodash.clonedeep');

var data = {  
    id: 'data',
    author: {
        name: 'mdemo',
        github: 'https://github.com/demohi'
    }
};

var data1 = cloneDeep(data);

console.log('equal:', data1===data); //false

data1.id = 'data1';  
data1.author.name = 'demohi';

console.log(data.id);// data  
console.log(data1.id);// data1

console.log(data.author.name);//mdemo  
console.log(data1.author.name);//demohi

12345678910111213141516171819202122232425262728

固然你或许意识到了，这样很是的慢。以下图，确实很慢

主角immutable.js登场

immutable.js是由facebook开源的一个项目，主要是为了解决javascript Immutable Data的问题，经过参考hash maps tries 和 vector tries提供了一种更有效的方式。

简单的来说，immutable.js经过structural sharing来解决的性能问题。咱们先看一段视频，看看immutable.js是如何作的

当咱们发生一个set操做的时候，immutable.js会只clone它的父级别以上的部分，其余保持不变，这样你们能够共享一样的部分，能够大大提升性能。

为何你要在React.js中使用Immutable Data

熟悉React.js的都应该知道，React.js是一个UI = f(states)的框架，为了解决更新的问题，React.js使用了virtual dom，virtual dom经过diff修改dom，来实现高效的dom更新。

听起来很完美吧，可是有一个问题。当state更新时，若是数据没变，你也会去作virtual dom的diff，这就产生了浪费。这种状况其实很常见，能够参考flummox这篇文章

固然你可能会说，你可使用PureRenderMixin来解决呀，PureRenderMixin是个好东西，咱们能够用它来解决一部分的上述问题，可是若是你留心的话，你能够在文档中看到下面这段提示。

This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only mix into components which have simple props and state, or use forceUpdate() when you know deep data structures have changed. Or, consider using immutable objects to facilitate fast comparisons of nested data.

PureRenderMixin只是简单的浅比较，不使用于多层比较。那怎么办？？本身去作复杂比较的话，性能又会很是差。

方案就是使用immutable.js能够解决这个问题。由于每一次state更新只要有数据改变，那么PureRenderMixin能够马上判断出数据改变，能够大大提高性能。这部分还能够参考官方文档Immutability Helpers

总结就是：使用PureRenderMixin + immutable.js