immutability-helper 学习笔记 -2

发布时间:2019-08-12 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了immutability-helper 学习笔记 -2脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

...这已经是今天第三篇博文了。很久没写了,突然写那么多感觉有点脑袋昏了。出来混总要还的,谁让我之前那么懒没有按照自己的计划更新博文...好了闲话不多说,我们接着上篇继续说咯。
上篇我们引出了一个很有实用价值的第三方插件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);

输出结果:

immutability-helper 学习笔记 -2


简单,就是将$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);

输出结果:

immutability-helper 学习笔记 -2


可以看出$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开始才有,所以...感人!
输出结果:

immutability-helper 学习笔记 -2

$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 学习笔记 -2


用法同样简单明了。

到这里,immutability-helper就全部介绍完毕了。同时笔者也做个预告,接下来一大段时间内的博客会以React的新特性为主干线,比如最新大热的react hook也会是笔者重点介绍的特性。大家拭目以待吧!!

下期见...

脚本宝典总结

以上是脚本宝典为你收集整理的immutability-helper 学习笔记 -2全部内容,希望文章能够帮你解决immutability-helper 学习笔记 -2所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。