详解Immutable及 React 中实践

有人说 immutable 可以给 react 应用带来数十倍的提升，也有人说 immutable 的引入是近期 javascript 中伟大的发明，因为同期 react 太火，它的光芒被掩盖了。这些至少说明 immutable 是很有价值的，下面我们来一探究竟。

javascript 中的对象一般是可变的（mutable），因为使用了引用赋值，新的对象简单的引用了原始对象，改变新的对象将影响到原始对象。如 foo={a: 1}; bar=foo; bar.a=2 你会发现此时 foo.a 也被改成了 2。虽然这样做可以节约内存，但当应用复杂后，这就造成了非常大的隐患，mutable 带来的优点变得得不偿失。为了解决这个问题，一般的做法是使用 shallowcopy（浅拷贝）或 deepcopy（深拷贝）来避免被修改，但这样做造成了 cpu 和内存的浪费。
immutable 可以很好地解决这些问题。

什么是 immutable data

immutable data 就是一旦创建，就不能再被更改的数据。对 immutable 对象的任何修改或添加删除操作都会返回一个新的 immutable 对象。immutable 实现的原理是 persistent data structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepcopy 把所有节点都复制一遍带来的性能损耗，immutable 使用了 structural sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。请看下面动画：

擦，费了好大劲做了个 gif 动画，竟然被强制转成了静态图，请移步 http://img.alicdn.com/tps/i2/tb1zzi_kxxxxxctxfxxbrb8ovxx-613-575.gif 观看
目前流行的 immutable 库有两个：

1.immutable.js

facebook 工程师 lee byron 花费 3 年时间打造，与 react 同期出现，但没有被默认放到 react 工具集里（react 提供了简化的 helper）。它内部实现了一套完整的 persistent data structure，还有很多易用的数据类型。像 collection、list、map、set、record、seq。有非常全面的map、filter、groupby、reduce``find函数式操作方法。同时 api 也尽量与 object 或 array 类似。

其中有 3 种最重要的数据结构说明一下：（java 程序员应该最熟悉了）

map：键值对集合，对应于 object，es6 也有专门的 map 对象
list：有序可重复的列表，对应于 array
set：无序且不可重复的列表

2.seamless-immutable

与 immutable.js 学院派的风格不同，seamless-immutable 并没有实现完整的 persistent data structure，而是使用 object.defineproperty（因此只能在 ie9 及以上使用）扩展了 javascript 的 array 和 object 对象来实现，只支持 array 和 object 两种数据类型，api 基于与 array 和 object 操持不变。代码库非常小，压缩后下载只有 2k。而 immutable.js 压缩后下载有 16k。

下面上代码来感受一下两者的不同：

// 原来的写法
let foo = {a: {b: 1}};
let bar = foo;
bar.a.b = 2;
console.log(foo.a.b); // 打印 2
console.log(foo === bar); // 打印 true
// 使用 immutable.js 后
import immutable from ‘immutable';
foo = immutable.fromjs({a: {b: 1}});
bar = foo.setin([‘a', ‘b'], 2);  // 使用 setin 赋值
console.log(foo.getin([‘a', ‘b'])); // 使用 getin 取值，打印 1
console.log(foo === bar); // 打印 false
// 使用 seamless-immutable.js 后
import simmutable from ‘seamless-immutable';
foo = simmutable({a: {b: 1}})
bar = foo.merge({a: { b: 2}})  // 使用 merge 赋值
console.log(foo.a.b); // 像原生 object 一样取值，打印 1
console.log(foo === bar); // 打印 false

immutable 优点

1 . immutable 降低了 mutable 带来的复杂度

可变（mutable）数据耦合了 time 和 value 的概念，造成了数据很难被回溯。

比如下面一段代码：

function touchandlog(touchfn) {
  let data = { key: ‘value' };
  touchfn(data);
  console.log(data.key); // 猜猜会打印什么？
}

在不查看 touchfn 的代码的情况下，因为不确定它对 data 做了什么，你是不可能知道会打印什么（这不是废话吗）。但如果 data 是 immutable 的呢，你可以很肯定的知道打印的是 value。

2 . 节省内存

immutable.js 使用了 structure sharing 会尽量复用内存。没有被引用的对象会被垃圾回收。

import { map} from ‘immutable';
 let a = map({
 select: ‘users',
 filter: map({ name: ‘cam' })
})
let b = a.set(‘select', ‘people');
a === b; // false
a.get(‘filter') === b.get(‘filter'); // true

上面 a 和 b 共享了没有变化的 `filter` 节点。

3 . undo/redo，copy/paste，甚至时间旅行这些功能做起来小菜一碟

因为每次数据都是不一样的，只要把这些数据放到一个数组里储存起来，想回退到哪里就拿出对应数据即可，很容易开发出撤销重做这种功能。

后面我会提供 flux 做 undo 的示例。

4 . 并发安全

传统的并发非常难做，因为要处理各种数据不一致问题，因此『聪明人』发明了各种锁来解决。但使用了 immutable 之后，数据天生是不可变的，并发锁就不需要了。

然而现在并没什么卵用，因为 javascript 还是单线程运行的啊。但未来可能会加入，提前解决未来的问题不也挺好吗？

拥抱函数式编程

immutable 本身就是函数式编程中的概念，纯函数式编程比面向对象更适用于前端开发。因为只要输入一致，输出必然一致，这样开发的组件更易于调试和组装。

像 clojurescript，elm 等函数式编程语言中的数据类型天生都是 immutable 的，这也是为什么 clojurescript 基于 react 的框架 — om 性能比 react 还要好的原因。

使用 immutable 的缺点

需要学习新的 api

no comments

增加了资源文件大小

no comments

容易与原生对象混淆

这点是我们使用 immutable.js 过程中遇到最大的问题。写代码要做思维上的转变。

虽然 immutable.js 尽量尝试把 api 设计的原生对象类似，有的时候还是很难区别到底是 immutable 对象还是原生对象，容易混淆操作。

immutable 中的 map 和 list 虽对应原生 object 和 array，但操作非常不同，比如你要用 map.get(‘key') 而不是 map.key，array.get(0) 而不是 array[0]。另外 immutable 每次修改都会返回新对象，也很容易忘记赋值。

当使用外部库的时候，一般需要使用原生对象，也很容易忘记转换。

下面给出一些办法来避免类似问题发生：

使用 flow 或 typescript 这类有静态类型检查的工具

约定变量命名规则：如所有 immutable 类型对象以 $$ 开头。

使用 immutable.fromjs 而不是 immutable.map 或 immutable.list 来创建对象，这样可以避免 immutable 和原生对象间的混用。

更多认识

1 . immutable.is

两个 immutable 对象可以使用 === 来比较，这样是直接比较内存地址，性能最好。但即使两个对象的值是一样的，也会返回 false：

let map1 = immutable.map({a:1, b:1, c:1});
let map2 = immutable.map({a:1, b:1, c:1});
map1 === map2;       // false

为了直接比较对象的值，immutable.js 提供了 immutable.is 来做『值比较』，结果如下：

immutable.is(map1, map2); // true

immutable.is 比较的是两个对象的 hashcode 或 valueof（对于 javascript 对象）。由于 immutable 内部使用了 trie 数据结构来存储，只要两个对象的 hashcode 相等，值就是一样的。这样的算法避免了深度遍历比较，性能非常好。

后面会使用 immutable.is 来减少 react 重复渲染，提高性能。

另外，还有 mori、cortex 等，因为类似就不再介绍。

2 . 与 object.freeze、const 区别

object.freeze 和 es6 中新加入的 const 都可以达到防止对象被篡改的功能，但它们是 shallowcopy 的。对象层级一深就要特殊处理了。

3 . cursor 的概念

这个 cursor 和数据库中的游标是完全不同的概念。

由于 immutable 数据一般嵌套非常深，为了便于访问深层数据，cursor 提供了可以直接访问这个深层数据的引用。

import immutable from ‘immutable';
import cursor from ‘immutable/contrib/cursor';
let data = immutable.fromjs({ a: { b: { c: 1 } } });
// 让 cursor 指向 { c: 1 }
let cursor = cursor.from(data, [‘a', ‘b'], newdata => {
// 当 cursor 或其子 cursor 执行 update 时调用
console.log(newdata);
});
cursor.get(‘c'); // 1
cursor = cursor.update(‘c', x => x + 1);
cursor.get(‘c'); // 2

实践

与 react 搭配使用，pure render

熟悉 react 的都知道，react 做性能优化时有一个避免重复渲染的大招，就是使用 shouldcomponentupdate()，但它默认返回 true，即始终会执行 render() 方法，然后做 virtual dom 比较，并得出是否需要做真实 dom 更新，这里往往会带来很多无必要的渲染并成为性能瓶颈。

当然我们也可以在 shouldcomponentupdate() 中使用使用 deepcopy 和 deepcompare 来避免无必要的 render()，但 deepcopy 和 deepcompare 一般都是非常耗性能的。

immutable 则提供了简洁高效的判断数据是否变化的方法，只需 === 和 is 比较就能知道是否需要执行 render()，而这个操作几乎 0 成本，所以可以极大提高性能。修改后的 shouldcomponentupdate 是这样的：

import { is } from ‘immutable';
 shouldcomponentupdate: (nextprops = {}, nextstate = {}) => {
  const thisprops = this.props || {}, thisstate = this.state || {};
  if (object.keys(thisprops).length !== object.keys(nextprops).length ||
   object.keys(thisstate).length !== object.keys(nextstate).length) {
    return true;
  }
  for (const key in nextprops) {
   if (thisprops[key] !== nextprops[key] || ！is(thisprops[key],      nextprops[key])) {
   return true;
  }
 }
  for (const key in nextstate) {
   if (thisstate[key] !== nextstate[key] || ！is(thisstate[key], nextstate[key])) {
    return true;
   }
  }
  return false;
 }

使用 immutable 后，如下图，当红色节点的 state 变化后，不会再渲染树中的所有节点，而是只渲染图中绿色的部分：

你也可以借助 react.addons.purerendermixin 或支持 class 语法的pure-render-decorator 来实现。

setstate 的一个技巧

react 建议把 this.state 当作 immutable 的，因此修改前需要做一个 deepcopy，显得麻烦：

import ‘_' from ‘lodash';
const component = react.createclass({
getinitialstate() {
return {
data: { times: 0 }
}
},
handleadd() {
let data = _.clonedeep(this.state.data);
data.times = data.times + 1;
this.setstate({ data: data });
// 如果上面不做 clonedeep，下面打印的结果会是已经加 1 后的值。
console.log(this.state.data.times);
}
}

使用 immutable 后：

getinitialstate() {
 return {
  data: map({ times: 0 })
 }
},
handleadd() {
 this.setstate({ data: this.state.data.update(‘times', v => v + 1) });
 // 这时的 times 并不会改变
 console.log(this.state.data.get(‘times'));
}

上面的 `handleadd` 可以简写成：

handleadd() {
 this.setstate(({data}) => ({
 data: data.update(‘times', v => v + 1) })
});
}

2 . 与 flux 搭配使用

由于 flux 并没有限定 store 中数据的类型，使用 immutable 非常简单。

现在是实现一个类似带有添加和撤销功能的 store：

import { map, orderedmap } from ‘immutable';
let todos = orderedmap();
let history = []; // 普通数组，存放每次操作后产生的数据
let todostore = createstore({
 getall() { return todos; }
});
dispatcher.register(action => {
 if (action.actiontype === ‘create') {
 let id = createguid();
 history.push(todos); // 记录当前操作前的数据，便于撤销
 todos = todos.set(id, map({
  id: id,
  complete: false,
  text: action.text.trim()
 }));
todostore.emitchange();
} else if (action.actiontype === ‘undo') {
// 这里是撤销功能实现，
// 只需从 history 数组中取前一次 todos 即可
 if (history.length > 0) {
  todos = history.pop();
 }
 todostore.emitchange();
}
});

3 . 与 redux 搭配使用

redux 是目前流行的 flux 衍生库。它简化了 flux 中多个 store 的概念，只有一个 store，数据操作通过 reducer 中实现；同时它提供更简洁和清晰的单向数据流（view -> action -> middleware -> reducer），也更易于开发同构应用。目前已经在我们项目中大规模使用。

由于 redux 中内置的 combinereducers 和 reducer 中的 initialstate 都为原生的 object 对象，所以不能和 immutable 原生搭配使用。

幸运的是，redux 并不排斥使用 immutable，可以自己重写 combinereducers 或使用 redux-immutablejs 来提供支持。

上面我们提到 cursor 可以方便检索和 update 层级比较深的数据，但因为 redux 中已经有了 select 来做检索，action 来更新数据，因此 cursor 在这里就没有用武之地了。

总结

immutable 可以给应用带来极大的性能提升，但是否使用还要看项目情况。由于侵入性较强，新项目引入比较容易，老项目迁移需要评估迁移。对于一些提供给外部使用的公共组件，最好不要把 immutable 对象直接暴露在对外接口中。

如果 js 原生 immutable 类型会不会太美，被称为 react api 终结者的 sebastian markbåge 有一个这样的提案，能否通过现在还不确定。不过可以肯定的是 immutable 会被越来越多的项目使用。