摘要:介绍按照官网的定义是指一旦被创造后,就不可以被改变的数据。很多场景下,对于属性相同的对象,我们希望相等性判断为。和都有一个名为方法,用来处理深度对象的比较。之于的好处众所周知,性能优化的核心在于处理方法来避免不必要的渲染。
介绍
按照官网的定义, Immutable Data是指一旦被创造后,就不可以被改变的数据。
相等性判断JavaScript提供三种不同的值比较操作:
严格相等 ("triple equals" 或 "identity"),使用 ===
宽松相等 ("double equals") ,使用 ==
Object.is( ECMAScript 2015/ ES6 新特性)
三者区别如下:
那么,javascript是怎么对两个对象进行比较的呢?
var person1 = { age: 27, gender: "male", education: {major:"math",school:"Harvard"} }; var person2 = { age: 27, gender: "male", education: {major:"math",school:"Harvard"} }; console.log(person1 == person2); //false console.log(person1 === person2); //false console.log(Object.is(person1,person2)); //false
虽然,person1和person2的属性是完全一样的,但是person1和person2相等性判断为false。因为对象是通过指针指向的内存中的地址来比较的。
很多场景下,对于属性相同的对象,我们希望相等性判断为true。Underscore.js和Lodash都有一个名为_.isEqual()方法,用来处理深度对象的比较。大致思路是递归查找对象的属性进行值比较(具体实现推荐这篇文章:https://github.com/hanzichi/u...)。当然了,对象层级越深,比较越耗时。
相比之下,immutable.js使用了 Structural Sharing(结构共享),特别擅长处理对象的比较,性能非常好。上面的代码,让我们换成immutable.js来表达:
const person1 = Immutable.Map( { age: 27, gender: "male", education: Immutable.Map({ major:"math", school:"Harvard" }) }); const person2 = Immutable.Map( { age: 27, gender: "male", education: Immutable.Map({ major:"math", school:"Harvard" }) }); const person3 = person1.setIn(["education","major"], "english"); //person3专业为english console.log(Immutable.is(person1, person2));//true console.log(Immutable.is(person1, person3));//false
恩,达到了我们想要的效果。
immutable.js之于react的好处众所周知,react性能优化的核心在于处理shouldComponentUpdate方法来避免不必要的渲染。虽然react提供了PureComponent,但它实质只是浅比较,无法很好地处理对象的比较,所以还是不能解决重复渲染的问题。
这个时候,immutable.js应运而生,它可以完美地解决这个问题,极大地提高react应用的性能。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/88789.html
摘要:文章博客地址所创建的数据有一个迷人的特性数据创建后不会被改变。是的基类,使用该类时需要至少继承其子类中的一个。总结所提供的和固有的各有优势,未来有可能制定一套原生的规范,在这之前,是一个不错的选择。参考资料官方文档 文章博客地址:http://pinggod.com/2016/Immutable/ Immutable.js 所创建的数据有一个迷人的特性:数据创建后不会被改变。我们使用 ...
摘要:函数式编程,一看这个词,简直就是学院派的典范。所以这期周刊,我们就重点引入的函数式编程,浅入浅出,一窥函数式编程的思想,可能让你对编程语言的理解更加融会贯通一些。但从根本上来说,函数式编程就是关于如使用通用的可复用函数进行组合编程。 showImg(https://segmentfault.com/img/bVGQuc); 函数式编程(Functional Programming),一...
阅读 1369·2021-10-11 10:58
阅读 1454·2021-09-04 16:41
阅读 653·2019-08-30 15:55
阅读 782·2019-08-29 18:46
阅读 3116·2019-08-29 14:05
阅读 3503·2019-08-26 14:00
阅读 2430·2019-08-26 13:53
阅读 3123·2019-08-26 13:29