快捷導航

搞定immutable.js詳細說明

更新時間：2016年05月02日 22:22:04 作者：mdemo

Immutable Data是指一旦被創(chuàng)造后，就不可以被改變的數(shù)據(jù)。通過使用Immutable Data，可以讓我們更容易的去處理緩存、回退、數(shù)據(jù)變化檢測等問題，簡化我們的開發(fā)

什么是Immutable Data

Immutable Data是指一旦被創(chuàng)造后，就不可以被改變的數(shù)據(jù)。

通過使用Immutable Data，可以讓我們更容易的去處理緩存、回退、數(shù)據(jù)變化檢測等問題，簡化我們的開發(fā)。

js中的Immutable Data
在javascript中我們可以通過deep clone來模擬Immutable Data，就是每次對數(shù)據(jù)進行操作，新對數(shù)據(jù)進行deep clone出一個新數(shù)據(jù)。

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是如何做的

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

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

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

聽起來很完美吧，但是有一個問題。當state更新時，如果數(shù)據(jù)沒變，你也會去做virtual dom的diff，這就產(chǎn)生了浪費。這種情況其實很常見，可以參考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更新只要有數(shù)據(jù)改變，那么PureRenderMixin可以立刻判斷出數(shù)據(jù)改變，可以大大提升性能。這部分還可以參考官方文檔Immutability Helpers

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