持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情

前言

哈喽大家好，我是Lotzinfly，一位前端小猎人。欢迎大家再次来到前端丛林，在这里你将会遇到各种各样的前端猎物，我希望可以把这些前端猎物统统拿下，嚼碎了服用，并成为自己身上的骨肉。今天是我们冒险的第九天，不知道大家最近学到哪里了呢？今天给大家介绍一下React中的Immutable，到底什么是Immutable呢？话不多说，开始我们的冒险之旅吧！

1. 可共享可变状态是万恶之源

let objA = { name: '小明' };
let objB = objA;
objB.name = '18';
console.log(objA.name);

2. 什么是 Immutable

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

3. Immutable类库

内部实现了一套完整的 Persistent Data Structure,还有很多易用的数据类型。像**Collection 、 List 、 Map 、 Set 、 Record **

3.1 Map

const immutable = require("immutable");
const assert = require("assert");
let obj1 = immutable.Map({ name: '小明', age: 18 });
let obj2 = obj1.set('name', '小航');
let obj3 = obj2.update('age', x => x + 1);
let obj4 = obj3.merge({ home: '北京' });
console.log(obj1, obj2, obj3, obj4);
let obj6 = immutable.fromJS({ user: { name: '小明', age: 18 }, 'k': 'v' });
let obj7 = obj6.setIn(['user', 'name'], '小航');
let obj8 = obj7.updateIn(['user', 'age'], x => x + 1);
let obj9 = obj8.mergeIn(["user"], { home: '北京' });
console.log(obj6, obj7, obj8, obj9);
console.log(obj6.get('user'));
console.log(obj6.getIn(['user', 'name']));
console.log(...obj6.keys());
console.log(...obj6.values());
console.log(...obj6.entries());
var map1 = immutable.Map({ name: '小张', age: 19 });
var map2 = immutable.Map({ name: '小张', age: 19 });
assert(map1 !== map2);
assert(Object.is(map1, map2) === false);
assert(immutable.is(map1, map2) === true);

3.2 List

let immutable = require('immutable');
let arr1 = immutable.fromJS([1, 2, 3]);
console.log(arr1.size);
let arr2 = arr1.push(4);
console.log(arr2);
let arr3 = arr2.pop();
console.log(arr3);
let arr4 = arr3.update(2, x => x + 1);
console.log(arr4);
let arr5 = arr4.concat([5, 6]);
console.log(arr5);
let arr6 = arr5.map(item => item * 2);
console.log(arr6);
let arr7 = arr6.filter(item => item >= 10);
console.log(arr7);
console.log(arr7.get(0));
console.log(arr7.includes(10));
console.log(arr7.last());
let val = arr7.reduce((val, item) => val + item, 0);
console.log(val);
console.log(arr7.count());

4. Immutable优势

4.1 降低复杂度

let obj1 = immutable.fromJS({ user: { name: '小明', age: 8 }, 'k': 'v' });
let obj2 = obj1.setIn(['user', 'name'], '小航');

4.2 节省内存

let Immutable = require('immutable');
let p1 = Immutable.fromJS({
    name: '小明',
    home: { name: 'beijing' }
});
let p2 = p1.set('name', '小航');
console.log(p1.get('home') == p2.get('home'));

4.3 方便回溯

只要把每次的状态都放在一个数组中就可以很方便的实现撤销重做功能

结尾

好啦，这期的前端丛林大冒险先到这里啦！这期我们介绍了Immutable，相信让大家对Immutable有了更深入的了解，大家一定要好好啃下来嚼烂嚼透。希望大家可以好好品尝并消化，迅速升级，接下来我们才更好地过五关斩六将！好啦，我们下期再见。拜拜！

【前端丛林】React这样服用，效果更佳（9）

前言