快捷導(dǎo)航

搞定immutable.js詳細(xì)說(shuō)明

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

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

什么是Immutable Data

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

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

js中的Immutable Data
在javascript中我們可以通過(guò)deep clone來(lái)模擬Immutable Data，就是每次對(duì)數(shù)據(jù)進(jìn)行操作，新對(duì)數(shù)據(jù)進(jìn)行deep clone出一個(gè)新數(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

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

主角immutable.js登場(chǎng)

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

簡(jiǎn)單的來(lái)講，immutable.js通過(guò)structural sharing來(lái)解決的性能問(wèn)題。我們先看一段視頻，看看immutable.js是如何做的

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

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

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

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

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

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

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

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