JS -- Immutable.js & React & Redux

╰+攻爆jí腚メ 2022-06-05 02:38 146阅读 0赞

## 乱入的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][http_img.alicdn.com_tps_i2_TB1zzi_KXXXXXctXFXXbrb8OVXX-613-575.gif]  
原文链接：  
[https://zhuanlan.zhihu.com/purerender/20295971][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。

[http_img.alicdn.com_tps_i2_TB1zzi_KXXXXXctXFXXbrb8OVXX-613-575.gif]: http://img.alicdn.com/tps/i2/TB1zzi_KXXXXXctXFXXbrb8OVXX-613-575.gif
[https_zhuanlan.zhihu.com_purerender_20295971]: https://zhuanlan.zhihu.com/purerender/20295971