immutable.js初识

AdolphLWQ 发布于2019-08-21 16:50 / 2193人阅读

摘要：介绍按照官网的定义是指一旦被创造后，就不可以被改变的数据。很多场景下，对于属性相同的对象，我们希望相等性判断为。和都有一个名为方法，用来处理深度对象的比较。之于的好处众所周知，性能优化的核心在于处理方法来避免不必要的渲染。

介绍

按照官网的定义, 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应用的性能。

服务器托管专线服务 docker初识初识关系数据库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88789.html

Immutable.js 初识

摘要：文章博客地址所创建的数据有一个迷人的特性数据创建后不会被改变。是的基类，使用该类时需要至少继承其子类中的一个。总结所提供的和固有的各有优势，未来有可能制定一套原生的规范，在这之前，是一个不错的选择。参考资料官方文档文章博客地址：http://pinggod.com/2016/Immutable/ Immutable.js 所创建的数据有一个迷人的特性：数据创建后不会被改变。我们使用 ...

Olivia 2019-08-19 18:45 评论0 收藏0
SegmentFault 技术周刊 Vol.16 - 浅入浅出 JavaScript 函数式编程

摘要：函数式编程，一看这个词，简直就是学院派的典范。所以这期周刊，我们就重点引入的函数式编程，浅入浅出，一窥函数式编程的思想，可能让你对编程语言的理解更加融会贯通一些。但从根本上来说，函数式编程就是关于如使用通用的可复用函数进行组合编程。 showImg(https://segmentfault.com/img/bVGQuc); 函数式编程（Functional Programming），一...

csRyan 2019-08-22 10:50 评论0 收藏0
深入理解js

摘要：详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于，工作和学习过程中遇到过许多问题，也解答过许多别人的问题。介绍了的内存管理。延迟加载 (Lazyload) 三种实现方式延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。详解 Javascript十大常用设计模式力荐~ ...

caikeal 2019-08-26 11:39 评论0 收藏0