facebook immutable.js 意义何在,使用场景?

有人用facebook的immutablejs吗?能不能解释一下为什么使用,意义何在?使用场景?
关注者
916
被浏览
41011

11 个回答

最近项目中频繁用到所以回答一下。首先,它虽然和React同期出现且跟React配合很爽,但它可不是React工具集里的(它的光芒被掩盖了),它是一个完全独立的库,无论基于什么框架都可以用它。意义在于它弥补了Javascript没有不可变数据结构的问题。不可变数据结构是函数式编程中必备的。前端工程师被OOP洗脑太久了,组件根本上就是函数用法,FP的特点更适用于前端开发。

Javascript中对象都是参考类型,也就是a={a:1}; b=a; b.a=10;你发现a.a也变成10了。可变的好处是节省内存或是利用可变性做一些事情,但是,在复杂的开发中它的副作用远比好处大的多。于是才有了浅copy和深copy,就是为了解决这个问题。举个常见例子:

var defaultConfig = { /* 默认值 */};
var config = $.extend({}, defaultConfig, initConfig); // jQuery用法。initConfig是自定义值
var config = $.extend(true, {}, defaultConfig, initConfig); // 如果对象是多层的,就用到deep-copy了

ES6出现原生的assign方法,但它相当于是浅copy。如果有了不可变的数据结构就省心了,ES5.1中对象有了freeze方法,也是浅copy,a=Object.freeze({a:1}); b=a; b.a=10; a.a还是1。在实际开发中浅copy通常不够。如果用immutableJS:

var defaultConfig = Immutable.fromJS({ /* 默认值 */});
var config = defaultConfig.merge(initConfig); // defaultConfig不会改变,返回新值给config
var config = defaultConfig.mergeDeep(initConfig); // 深层merge

上述用deep-copy也可以做到,差别在于性能。每次deep-copy都要把整个对象递归的复制一份。而Immutable的实现有些像链表,添加一个新结点把旧结点的父子关系转移到新结点上,性能提升很多,想深挖原理请看这里:Persistent data structure。ImmutableJS给的远不止这些,它提供了7种不可变的数据结构:List, Stack, Map, OrderedMap, Set, OrderedSet, Record (详见文档Immutable.js,文档很geek,打开console试吧)。immutableJS + 原生Javascript等于真正的函数式编程。

遍历对象不再用for-in,可以这样:
Immutable.fromJS({a:1, b:2, c:3}).map(function(value, key) { /* do some thing */});

实现一个map-reduce:
var o = Immutable.fromJS({a:{a:1}, b:{a:2}, c:{a:3}});
o.map(function(e){ return e.get('a'); }).reduce(function(e1, e2){ return e1 + e2; }, 0);

修改藏在深处的值,可以这样:
var o = Immutable.fromJS({a:[{a1:1}, {b:[{t:1}]}, {c1:2}], b:2, c:3});
o = o.setIn(['a', 1, 'b', 0, 't'], 100); // t赋值
o = o.updateIn(['a', 1, 'b', 0, 't'], function(e){ return e * 100; }); // t * 100

比较两个对象是否完全相等: o1.equals(o2)

远不止这些,immutableJS提供了强大的api自己去看吧。由于是不可变的,可以放心的对对象进行任意操作。在React开发中,频繁操作state对象或是store,配合immutableJS快、安全、方便。
写了篇文章介绍这个事情,欢迎大家去看,搞定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  

当然你或许意识到了,这样非常的慢。如下图,确实很慢

主角immutable.js登场

immutable.js是由facebook开源的一个项目,主要是为了解决javascript Immutable Data的问题,通过参考hash maps triesvector 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

参考

React.js Conf 2015 - Immutable Data and React

Immutability Helpers

PureRenderMixin

immutable-js