/**
 * 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

當(dāng)然你或許意識到了，這樣非常的慢。如下圖，確實(shí)很慢

主角immutable.js登場

immutable.js是由facebook開源的一個(gè)項(xiàng)目，主要是為了解決javascript Immutable Data的問題，通過參考hash maps tries 和 vector tries提供了一種更有效的方式。

簡單的來講，immutable.js通過structural sharing來解決的性能問題。我們先看一段視頻，看看immutable.js是如何做的

當(dāng)我們發(fā)生一個(gè)set操作的時(shí)候，immutable.js會只clone它的父級別以上的部分，其他保持不變，這樣大家可以共享同樣的部分，可以大大提高性能。

為什么你要在React.js中使用Immutable Data

熟悉React.js的都應(yīng)該知道，React.js是一個(gè)UI = f(states)的框架，為了解決更新的問題，React.js使用了virtual dom，virtual dom通過diff修改dom，來實(shí)現(xiàn)高效的dom更新。

聽起來很完美吧，但是有一個(gè)問題。當(dāng)state更新時(shí)，如果數(shù)據(jù)沒變，你也會去做virtual dom的diff，這就產(chǎn)生了浪費(fèi)。這種情況其實(shí)很常見，可以參考flummox這篇文章

當(dāng)然你可能會說，你可以使用PureRenderMixin來解決呀，PureRenderMixin是個(gè)好東西，我們可以用它來解決一部分的上述問題，但是如果你留心的話，你可以在文檔中看到下面這段提示。

復(fù)制代碼代碼如下:

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只是簡單的淺比較，不使用于多層比較。那怎么辦？？自己去做復(fù)雜比較的話，性能又會非常差。

方案就是使用immutable.js可以解決這個(gè)問題。因?yàn)槊恳淮蝧tate更新只要有數(shù)據(jù)改變，那么PureRenderMixin可以立刻判斷出數(shù)據(jù)改變，可以大大提升性能。這部分還可以參考官方文檔Immutability Helpers

總結(jié)就是：使用PureRenderMixin + immutable.js