呼…这已是本日第三篇博文了。很久没写了，倏忽写那末多觉得有点脑壳昏了。出来混总要还的，谁让我之前那末懒没有根据本身的设计更新博文…好了闲话不多说，我们接着上篇继承说咯。
上篇我们引出了一个很有实用代价的第三方插件immutability-helper，它已被大多数React开辟者所接收而且已在React项目中运用，至于它的代价地点，我想我已在上篇博文中说的很清晰了，所以在这里就不再赘述。
下面我们将上篇遗留下的5个指令引见完。

immutability-helper指令

$merge

望文生义，这个指令的作用就是兼并。兼并什么？兼并字面量对象！以什么体式格局兼并？浅兼并！

var update = require("immutability-helper");
const data = { a: 5, b: 3 };
const data2 = update(data, { $merge: { b: 6, c: 7 } });
console.log(data2);

输出效果：

很简单，就是将$merge指令对应的参数兼并到update函数的第一个参数中并输出一个内容雷同的另一个字面量对象。从运转效果来看后者会掩盖前者的部份属性(属性名雷同的情况下，比方：属性b)。

$apply

这个指令和$set有点相似，都能够用来更新对象的某个属性值。不过与$set差别的是，$apply经由历程传入一个function并将该function的返回值更新到指定属性值中去。
我们借$set的例子从新写一个例子

var update = require("immutability-helper");
const data = { 'id': 0, name: 'xiaoming' };
const data2 = update(data, { name: { $apply: function(name) { console.log(name); return 'Miss Li' } } });
console.log(data, data2);

输出效果：

能够看出$apply对应的要领被传入了被指定属性的初始值，然后将返回值从新set给了name属性。历程很简单！然则这个例子并不好，由于我们并没有拿传入的属性值做什么事变，所以$apply大多运用在set属性值之前有一些逻辑运算的情况下。比方值+1或许字符串转成大写等等…

接下来的两个指令一样平常开辟中险些用不到，最少博主是如许的。

$add

$add用来向Map或许Set对象中增加元素，这里我们用Map来做演示。

let update = require("immutability-helper");
let myMap = new Map();
myMap.set('a', '1');
const myMap2 = update(myMap, {
    $add: [
        ['foo', 'bar'], //每一个数组的第一个元素作为key，第二个元素作为value
        ['baz', 'boo']
    ]
})

for (let key of myMap.keys()) {
    console.log(key);
}

console.log('-----------------');
for (let key of myMap2.keys()) {
    console.log(key);
}

由于Map和Set从ES6最先才有，所以…动人！
输出效果：

$remove

$remove与$add完整相反，我们在上一个例子的基础上做点革新

let update = require("immutability-helper");
let myMap = new Map();
myMap.set('a', '1');
const myMap2 = update(myMap, {
    $add: [
        ['foo', 'bar'],
        ['baz', 'boo']
    ]
})

const myMap3 = update(myMap2, {
    $remove: 
        ['foo'] //想要删除的key的鸠合
})

for (let key of myMap.keys()) {
    console.log(key);
}

console.log('-----------------');
for (let key of myMap2.keys()) {
    console.log(key);
}

console.log('-----------------');
for (let key of myMap3.keys()) {
    console.log(key);
}

输出效果：

用法一样简单明了。

到这里，immutability-helper就悉数引见终了了。同时笔者也做个预报，接下来一大段时间内的博客会以React的新特征为主支线，比方最新大热的React Hook也会是笔者重点引见的特征。人人拭目以待吧！！

下期见…