脚本宝典收集整理的这篇文章主要介绍了

immutable.js初识

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

介绍

按照官网的定义, Immutable Data是指一旦被创造后,就不可以被改变的数据。

相等性判断

JavaScript提供三种不同的值比较操作:

  1. 严格相等 ("triple equals" 或 "identity"),使用 === 
  2. 宽松相等 ("double equals") ,使用 ==
  3. Object.isECMAScript 2015/ ES6 新特性)

三者区别如下:

aaa.png

那么,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。因为对象是通过指针指向的内存中的地址来比较的。

很多场景下,对于属性相同的对象,我们希望相等性判断为trueUnderscore.jsLodash都有一个名为_.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应用的性能。

总结

以上是脚本宝典为你收集整理的

immutable.js初识

全部内容,希望文章能够帮你解决

immutable.js初识

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过