JS -- Immutable.js & React & Redux

乱入的Docker

Docker是一个开源工具，能将一个WEB应用封装在一个轻量级，便携且独立的容器里，然后可以运行在几乎任何服务环境下。

Docker的容器能使应用跑在任何服务器上并且表现一致。一个开发者在笔记本上建立的一个容器，能跑在很多环境下，如：测试环境，生产环境，虚拟机上，VPS，OpenStack集群，公用的电脑等等。

Docker的一般使用在以下几点：
1 自动化打包和部署应用
2 创造一个轻量级的，私人的 PAAS 环境
3 自动化测试和连续的 整合/部署
4 部署WEB应用，数据库和后端服务

下面开始正题

JS中的对象，由于使用了引用赋值，新的对象只是简单的指向了原始对象，所以两个对象的操作会互相影响。

foo={a: 1}; 
bar=foo; 
bar.a=2

这时，foo bar的a都变成了2。当应用复杂的时候，这样的操作会存在很大的隐患。为了解决这个问题，我们引入Immutable。

Immutable对象的最大特点就是，一旦被创建，就不能再被修改。任何试图对Immutable对象的修改操作都会返回一个新的Immutable对象，而原对象不会改变。

Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。

原理动画：
http://img.alicdn.com/tps/i2/TB1zzi_KXXXXXctXFXXbrb8OVXX-613-575.gif
原文链接：
https://zhuanlan.zhihu.com/purerender/20295971

immutable.js

immutable.js 是流行的 Immutable 库。其中，最重要的三种数据结构是：

Map：键值对集合，对应于 Object，ES6 也有专门的 Map 对象
List：有序可重复的列表，对应于 Array
Set：无序且不可重复的列表

代码示例：

// immutable.js
import Immutable from 'immutable';
foo = Immutable.fromJS({a: {b: 1}}); // fromJS方法
bar = foo.setIn(['a', 'b'], 2);   // 使用 setIn 赋值
console.log(foo.getIn(['a', 'b']));  // 使用 getIn 取值，打印 1
console.log(foo === bar);  //  打印 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.is(map1, map2);  // true

实践

1、与React搭配，在shouldComponentUpdate返回false来避免不必要的渲染。

2、与Redux搭配，设置Store。