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