angular里面变化检测是非常频繁的发生的,如果你像下面这样写代码

<div>
{{hello()}}
</div>

则每次变化检测都会执行hello函数,如果hello函数十分耗时,则会出现占用CPU高的问题。

这时,推荐使用OnPush策略和immutable.js来提升angular应用的性能。

OnPush策略可以阻止angular变化检测传入组件,这样每次变化检测不会进到你的组件里面来调用hello函数。

引入immutable.js的作用是为了更加方便的使用OnPush策略。

看下immutable.js的例子

  const list1 = Immutable.List([ {a: 1}, {a: 2} ]);
const list2 = list1.push({a: '3'}); console.log(list1 === list2); // false
console.log(list1.get(0) === list2.get(0)); // true const list3 = list2.pop(); console.log(list1 === list3); // false const map1 = Immutable.Map({ a: 1, b: 2, c: 3 });
const map2 = map1.set('b', 50); console.log(map1 === map2); // false const map3 = map1.set('b', 2); console.log(map1 === map3); // true const map4 = map2.set('b', 2); console.log(map1 === map4); // false

这样在父组件里只需要如此写

export class AppComponent {
ii = ''; list = List([{label: 'default'}]); add() {
if (this.ii) {
this.list = this.list.push({label: this.ii});
this.ii = '';
}
}
}

子组件HTML代码

<div>
{{hello()}}
</div> <ul *ngFor="let item of list">
<li>{{item.label}}</li>
</ul>

不需要trackby,因为默认trackby就是比较元素相等,immutable.js数组里不变的元素就是相等的,少写一些代码啦。

使用OnPush和immutable.js来提升angular的性能的更多相关文章

  1. 大话immutable.js

    为啥要用immutable.js呢.毫不夸张的说.有了immutable.js(当然也有其他实现库)..才能将react的性能发挥到极致!要是各位看官用过一段时间的react,而没有用immutabl ...

  2. React+Immutable.js的心路历程

    这段时间做的项目开发中用的是React+Redux+ImmutableJs+Es6开发,总结了immutable.js的相关使用姿势: Immutable Data 顾名思义是指一旦被创造后,就不可以 ...

  3. Immutable.js 以及在 react+redux 项目中的实践

    来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...

  4. 深度浅出immutable.js

    这篇文章将讲述immutable.js的基本语法和用法. 1.fromJs()  Deeply converts plain JS objects and arrays to Immutable Ma ...

  5. Immutable.js – JavaScript 不可变数据集合

    不可变数据是指一旦创建就不能被修改的数据,使得应用开发更简单,允许使用函数式编程技术,比如惰性评估.Immutable JS 提供一个惰性 Sequence,允许高效的队列方法链,类似 map 和 f ...

  6. js 变量提升+方法提升

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. Immutable.js尝试(node.js勿入)

    最近做一些复杂html常常需要在页面做一些数据处理,常常在想如果 js有list 这种数据结构多少,今天逛github时 发现有Immutable.js 这个项目https://github.com/ ...

  8. [Javascript] Creating an Immutable Object Graph with Immutable.js Map()

    Learn how to create an Immutable.Map() through plain Javascript object construction and also via arr ...

  9. [Javascript] Manage Application State with Immutable.js

    Learn how Immutable.js data structures are different from native iterable Javascript data types and ...

随机推荐

  1. CSS书写及命名规范

    1.样式书写顺序 positioning定位::position.display.float.top. right.bottom.left.overflow.clear.z-index: box mo ...

  2. JS&JQ

    1.css()设置单个或多个值: $(".iconList a").css("width", "32%")--单值:属性和值逗号分隔. $( ...

  3. 【总结】2022GDOI普及组 没得游记

    因为是线上,所以没得游记 Day -3 学校安排去7班上课,好耶! 上午全是主科,有一节生物 被你七班捧上天了 被你七班造谣说我暴踩Everyone,还传到九班,给我玩阴的是吧 下午模拟赛,初一第一 ...

  4. .NET性能优化-为结构体数组使用StructLinq

    前言 本系列的主要目的是告诉大家在遇到性能问题时,有哪些方案可以去优化:并不是要求大家一开始就使用这些方案来提升性能. 在之前几篇文章中,有很多网友就有一些非此即彼的观念,在实际中,处处都是开发效率和 ...

  5. 好客租房12-JSX的注意点

    1.4注意点 1React元素的属性名使用驼峰式命名法 2特殊属性名 class-className for->htmlFor 3没有子节点可以用单标签表示 4使用小括号包裹jsx const ...

  6. 使用instanceof操作符判断对象类型及方法的重载

    学习内容: 一.使用instanceof操作符判断对象类型 1.instanceof操作符可以判断一个实例对象是否属于一个类. 语法:对象名 instanceof 类名 2.使用instanceof表 ...

  7. K8S 使用Kubeadm搭建高可用Kubernetes(K8S)集群 - 证书有效期100年

    1.概述 Kubenetes集群的控制平面节点(即Master节点)由数据库服务(Etcd)+其他组件服务(Apiserver.Controller-manager.Scheduler...)组成. ...

  8. 差分隐私(Differential Privacy)定义及其理解

    1 前置知识 本部分只对相关概念做服务于差分隐私介绍的简单介绍,并非细致全面的介绍. 1.1 随机化算法 随机化算法指,对于特定输入,该算法的输出不是固定值,而是服从某一分布. 单纯形(simplex ...

  9. Spark: 单词计数(Word Count)的MapReduce实现(Java/Python)

    1 导引 我们在博客<Hadoop: 单词计数(Word Count)的MapReduce实现 >中学习了如何用Hadoop-MapReduce实现单词计数,现在我们来看如何用Spark来 ...

  10. 开发工具-Base64编码/解码

    更新日志 2022年6月10日 新增链接. https://toolb.cn/base64