搞定immutable.js詳細說明_javascript技巧

什麼是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 

當然你或許意識到了，這樣非常的慢。如下圖，確實很慢

主角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 data Up into com； , consider using immutable objects to facilitate fast comparisons of nested data.

PureRenderMixin只是簡單的淺比較，不使用於多層比較。那怎麼辦？ ？自己去做複雜比較的話，表現又會非常差。

方案就是使用immutable.js可以解決這個問題。因為每一次state更新只要有資料改變，那麼PureRenderMixin可以立刻判斷出資料改變，可以大幅提升效能。這部分還可以參考官方文件Immutability Helpers

總結就是：使用PureRenderMixin + immutable.js

參考

React.js Conf 2015 - Immutable Data and React

Immutability Helpers

PureRenderMixin

immutable-js