angular2+项目实用操作笔记(三) OnPush变更检测策略

最新推荐文章于 2023-01-09 17:26:07 发布
最新推荐文章于 2023-01-09 17:26:07 发布
阅读量756 收藏
点赞数
分类专栏： angular学习笔记 文章标签： html5 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smallNut/article/details/106421406
版权

由于中大型项目避免不了存在组件嵌套的状况，而angular的变更检测机制默认为检测完根组件再向其叶(子)组件进行检测，叶组件检测完再向其叶(子)组件依次下去进行检测，这样会导致每次变更检测都会进行所有组件的state检测，这样无疑增加了视图的渲染时间和增加服务器的负担

所以对于子组件的属性的变化由输入属性决定的子组件可以为其添加changeDetection: ChangeDetectionStrategy.OnPush变更检测策略
在这里插入图片描述
当启用OnPush变更检测策略后，若非输入属性发生改变，否则变更检测将会跳过此子组件，这里找到了一张浅显易懂的图示在这里插入图片描述
如果在使用OnPush变更检测策略的页面需要手动调用变更检测也很简单
只需要在构造器中引入ChangeDetectorRef
在这里插入图片描述
之后在需要手动调用变更检测事件的地方调用ChangeDetectorRef内置方法markForCheck即可
在这里插入图片描述
仅作笔记，感谢指正

花心小坚果
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular 变更检测探究
技术玄关
04-09 518
引言 使用过现代JavaScript框架的开发者，都应该熟悉绑定（binding）的概念。绑定通常有两个方向。一是由用户交互驱动，在浏览器的页面上发生了输入、点击操作，导致应用程序的状态发生改变，这些改变需要反映到程序中特定变量上。另一个方向是，JavaScript代码的业务逻辑中改变了程序的状态，比如通过API请求拿到新的数据，而这些状态也需要反映的页面的控件上。很多框架如AngularJS就...
揭秘Angular 2+基于TypeScript的高性能SPA框架
11-09
三、Angular的变更检测机制 Angular使用Zone.js来实现变更检测，这使得框架能自动检测到应用程序状态的变化，并相应地更新视图。变更检测有两种主要模式：默认的检查（Check）模式和OnPush策略。OnPush策略是一种...
[Angular] ChangeDetection -- onPush
weixin_33753003的博客
01-31 160
To understand how change detection can help us improve the proference, we need to understand when it works first. There are some rules which can be applied when use change detection: changeDetecti...
Angular 性能提高之 —— OnPush
KenkoTech的博客
12-03 1603
变更检测是什么 当我们在 model 中改变数据时，框架层需要知道： model 哪里发生了改变 view 中哪里需要更新 整个angular app 是个组件树，不可能任意一个组件中的数据发生变化，所有的组件都更新，性能比较低 Angular 除了默认的变化检测机制，也提供了ChangeDetectionStrategy.OnPush，用 OnPush 可以跳过某个组件或者某个父组件以及它下面所有子组件的变化检测， 举个例子， 默认情况下父组件数据更改会影响到自组件的数据 使用...
[前端] Angular 产品开发中 OnPush 策略最佳实践
金木编程
08-30 268
在Angular产品开发中，随着功能的增多，项目的性能会变慢。其中一个重要原因就是每次model数据改变时，都会触发大量组件的变更检测。为了解决问题，我们可以应用Onpush策略。本文参考了大量理论资料，并结合实际项目提出了应用OnPush策略的最佳实践，供读者参考。...
Angular：OnPush变化检测策略介绍
weixin_30721899的博客
03-03 397
在OnPush策略下，Angular不会运行变化检测（Change Detection ），除非组件的input接收到了新值。接收到新值的意思是，input的值或者引用发生了变化。这样听起来不好理解，看例子： 子组件接收一个balls（别想歪:)）输入，然后在模板遍历这个balls数组并展示出来。初始化2秒后，往balls数组push一个new ball： //balls-list.compone...
AngularPWASeed：Angular 2+中内置的PWA的入门项目
02-05
Angular 2+中内置的PWA的入门项目 安装 npm install将下载构建和开发所需的所有依赖项 剧本 npm run build build-编译服务器并编译客户端 npm run buildssr转换服务器并为Angular Universal编译客户端 npm run dev...
angular2-spring：Angular 2+和Spring集成
01-29
angular 2+ Spring Boot集成 这个例子展示了如何用Angular和Spring Boot（RestController）做一个分页表 安装 后端 您将需要Maven 3+和Java 8 前端 npm install -g @angular/cli安装角度cli（全局） npm install...
mydatepicker:Angular 2+日期选择器
04-12
mydatepicker 新的日期选择器库 如果您的Angular版本> = 7.2，...要将此组件安装到外部项目，请按照以下步骤操作： npm install mydatepicker-保存 将MyDatePickerModule导入添加到您的@NgModule中，如下例所示 impor
Angular2+如何去除url中的#号详解
11-30
本文中主要介绍了关于Angular2+中去除url中#号的相关内容，这是最近在工作中遇到的一个问题，觉着有必要给大家分享下，下面话不多说了，来一起看看详细的介绍吧。 1. 为什么要去除？ Angular官方指出：如果没有足够...
angular input_Angular之性能优化-OnPush 和 NgZone
weixin_39536010的博客
12-01 119
Angular性能优化变化检测Angular 对比 AngularJS 在变化检测上由原来的双向检测(父->子，子->父)变为了单向(父->子)。所以每一次变化检测都会确定性地收敛，一般页面即使有几千个组件，变化检测也可以做几毫秒内完成，所以大家开发时很少会遇到性能瓶颈。(即使是AngularJS也很少遇到瓶颈)自然很多开发者其实对Angular变化检测不会去深入了解。什么是变化...
angular js 使用pdf.js_markForCheck()、OnPush、zone.js与detectChanges()
weixin_39949386的博客
11-21 160
Angular 更新 HTML 的原理首先，总结一下 Angular 的 change detection 的原理。一般来说，Angular 会在以下情况下更新 HTML：初始化 Component 。在最开始 bootstrapping Angular Application 的时候，Angular 会载入 bootstrap component 并调用 ApplicationRef.tick(...
Angular 的 OnPush 策略是什么，怎么使用
weixin_35749796的博客
01-09 318
OnPush 策略是 Angular 的组件检测机制之一。如果组件设置了 OnPush 策略，那么在下列情况下 Angular 才会对组件进行检测并更新视图： 输入属性的值发生了变化 调用了组件的 detectChanges() 方法 调用了组件所在的 NgZone 的 run() 方法 OnPush 策略可以帮助减少不必要的组件检测和视图更新，提高应用的性能。 要在组件中使用 OnPush ...
angular2 ChangeDetectorRef (变化检测器的引用)手动控制组件的变化检测行为
ditu3745的博客
02-22 828
Angular检测机制 　　监测到异步事件后是怎么判断是否需要更新视图呢？其实比较简单，Angular通过脏检查来判断是否需要更新视图。脏检查其实就是存储所有变量的值，每当可能有变量发生变化需要检查时，就将所有变量的旧值跟新值进行比较，不相等就说明检测到变化，需要更新对应视图。当然，实际情况肯定不是这么简单，Angular会通过自己的算法来对数据进行检查，对算法感兴趣的可以参考这篇...
angular中组件changeDetection为ChangeDetectionStrategy.OnPush时的学习
zgrbsbf的专栏
06-23 6110
一个angular应用是由组件树组成的，changeDetection是其中比较深的部分，我也不懂哈。 angular中changeDetection中的策略有这样的描述： 总而言之，对于一个组件而言，2中changeDetection策略，默认的没啥好说的，主要说一下OnPush的情况。 如果子组件的属性的变化由输入属性决定，那么这个时候就可以启用OnPush这种变更检测策略，这样输入属性不变的...
angular变化检测机制 【default策略，Onpush策略】
Lakeson
11-01 931
首先，数据发生变化被NgZone服务捕获NgZone服务通知Angular有数据发生改变Angular接收到有数据发生了变化的信号，对组件执行变更监测处理【当组件实例化之后，Angular 就会创建一个变更检测器，它负责传播组件各个绑定值的变化。】
关于 Angular—OnPush策略的变更检测
Altaba的博客
11-06 1158
关于 Angular—OnPush策略的变更检测 当组件通过在@Component中添加 changeDetection: ChangeDetectionStrategy.OnPush，变更检测的变化： #####不会触发的情况： 请求服务端数据，如xmlHttpRequest 回调中修改数据，不会触发变更检测，后续的该数据触发数据渲染也会延迟一步 定时事件，比如setTimeout，se...
Angular： 变化检测策略Change Detection的比较
dongnihao的博客
08-12 577
前置笔记:NGZORRO：一种Angular页面性能优化手段_董厂长的博客-CSDN博客事情是这样的，今天在看NGZORRO时候看见这么一句话。OnPush模式，性能卓越。🤔那我就来看看antdesgin是怎么做出性能优化的。所以“this.cdRef.markForCheck();”这句话只能引起一次变化检测，如要多次，则要多次的运行这句话，如果以上代码功能要改成3秒后开始计时，只要将this.timer == 3改成this.timer >= 3就行了。.........
对Angular的onPush,markForCheck()等变化检测方法说明和试用
漫步者的编程世界
11-22 2792
在使用Angular开发过程中，经常遇到组件数据不刷新的问题，要解决这类问题需要对Angular的数据变化检测机制有一个大致的了解。 在一般情况下，Angular组件的默认变化检测策略(Change Detection Strategy)默认为总是检测。如有一计时子组件 import { Component, OnInit } from "@angular/core"; @Component({ selector: "app-timer", template: ` <div>C
藏经阁-Angular2+进阶开发实战.pdf
最新发布
09-09
2. **工具与工程化（静态）**：这部分涵盖了Angular2项目的构建工具Webpack China的官方团队成员李李仲辉的专业视角，介绍如何利用Webpack和其他工程化工具来管理和构建Angular项目，确保项目的稳定性和效率。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值