Angular系列教程之变更检测与性能优化

news/2024/2/29 16:07:02/文章来源:https://blog.csdn.net/kingslave1/article/details/135630024

文章目录

    • 前言
    • 变更检测的原理
      • 脏检查
      • OnPush策略
    • 示例代码
    • 总结

前言

Angular 除了默认的变化检测机制,也提供了ChangeDetectionStrategy.OnPush,用 OnPush 可以跳过某个组件或者某个父组件以及它下面所有子组件的变化检测。

在本文中,我们将探讨Angular中的变更检测机制,并通过示例代码来说明其工作原理。

变更检测的原理

当我们在 model 中改变数据时,框架层需要知道:

  • model 哪里发生了改变

  • view 中哪里需要更新

当Angular应用运行时,它会周期性地检查组件及其绑定属性的状态是否发生了变化,并相应地更新视图。这个过程称为变更检测。

整个angular app 是个组件树,不可能任意一个组件中的数据发生变化,所有的组件都更新,性能比较低。

为此,Angular提供了两种变更检测策略:默认的脏检查OnPush策略

脏检查

脏检查是Angular默认采用的变更检测策略。它通过比较对象的旧值和新值来检测变化。当组件中的某个属性发生变化时,Angular会标记这个组件为“脏”,并触发变更检测过程。在变更检测过程中,Angular会递归遍历组件树,检查每个组件及其绑定属性是否发生了变化,并更新相应的视图。

虽然脏检查是一种灵活的变更检测策略,但它也可能导致性能问题。因为每次变更检测都需要遍历整个组件树,当应用规模较大时,性能开销会变得非常显著。

OnPush策略

为了解决脏检查可能带来的性能问题,Angular引入了OnPush策略。这种策略通过明确告诉Angular哪些组件是纯粹的(pure)来提高性能。纯组件只在它们的输入属性发生变化时才被视为“脏”,从而触发变更检测。

要使用OnPush策略,我们需要将组件的changeDetection属性设置为ChangeDetectionStrategy.OnPush。此外,我们还需要注意,输入属性必须是不可变(immutable)的,即不能直接修改其值,而是应该返回一个新的对象。

示例代码

下面是一个简单的示例,演示了如何使用Angular的变更检测机制。假设我们有一个名为UserComponent的组件,其中包含一个名为user的输入属性。

import { Component, Input } from '@angular/core';@Component({selector: 'app-user',template: `<div><h2>{{ user.name }}</h2><p>{{ user.email }}</p></div>`,changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserComponent {@Input() user: User;
}

在上面的代码中,我们使用了changeDetection: ChangeDetectionStrategy.OnPush来启用OnPush策略。这意味着当user输入属性发生变化时,才会触发变更检测。

除此之外,我们还需要定义一个User类来表示用户对象:

export class User {constructor(public name: string, public email: string) {}
}

在父组件中,我们可以随时修改user属性的值,并观察变更检测的效果:

import { Component } from '@angular/core';@Component({selector: 'app-root',template: `<app-user [user]="currentUser"></app-user><button (click)="changeUser()">Change User</button>`,
})
export class AppComponent {currentUser: User = new User('John Doe', 'john@example.com');changeUser() {this.currentUser = new User('Alice Smith', 'alice@example.com');}
}

通过点击“Change User”按钮,我们可以看到视图中显示的用户名和邮箱地址实时更新。

此外,我们还可以借助ChangeDetectorRef对象,主动触发Angular的变更检测。示例代码如下:

import { Component } from '@angular/core';@Component({selector: 'app-root',template: `<app-user [user]="currentUser"></app-user><button (click)="changeUser()">Change User</button>`,
})
export class AppComponent {currentUser: User = new User('John Doe', 'john@example.com');constructor(private cdr: ChangeDetectorRef){}changeUser() {this.currentUser.name = 'Alice Smith';this.currentUser.email = 'alice@example.co';this.cdr.detectChanges();}
}

总结

变更检测是Angular框架的核心功能之一。通过脏检查和OnPush策略,Angular能够自动追踪组件及其绑定属性的变化,并更新相应的视图。

尽管脏检查是默认的检测策略,但在性能要求较高的情况下,使用OnPush策略可以明显降低Angular的变更检测次数,从而显著提升应用的性能。

希望本文对您理解Angular的变更检测机制有所帮助!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_925943.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

目标检测DETR:End-to-End Object Detection with Transformers

NMS 对一个目标生成了多个检测窗口&#xff0c;但是事实上这些窗口中大部分内容都是重复的&#xff0c;找到目标检测最优的窗口 选取多个检测窗口中分数最高的窗口&#xff0c;剔除掉其他同类型的窗口 anchor generator 首先在该点生成scale512, aspect ratio{1:2&#xff…

设计模式 代理模式(静态代理 动态代理) 与 Spring Aop源码分析 具体是如何创建Aop代理的

代理模式 代理模式是一种结构型设计模式&#xff0c;它通过创建一个代理对象来控制对真实对象的访问。这种模式可以用于提供额外的功能操作&#xff0c;或者扩展目标对象的功能。 在代理模式中&#xff0c;代理对象与真实对象实现相同的接口&#xff0c;以便在任何地方都可以使…

电影《潜行》中说的蜜罐是什么(网络安全知识)

近期刘德华、彭于晏主演的电影《潜行》在网上掀起了轩然大波&#xff0c;电影中有提到网络蜜罐&#xff0c;这引起了很多观众的疑问&#xff0c;蜜罐到底是什么&#xff1f; 从字面意思上来看&#xff0c;蜜罐就是为黑客设下的诱饵。这是一种具有牺牲性质的计算机系统&#xff…

浪之潮科技:动力恢复清积碳,尾气治理三元催化修复

针对汽车出现油耗增加、动力减弱以及尾气检测不合格等情况&#xff0c;深圳市浪之潮科技有限公司&#xff08;以下简称&#xff1a;浪之潮科技&#xff09;求真务实、勇于创新&#xff0c;独创两大系统六大部位——动力恢复清积碳、尾气治理三元催化修复&#xff0c;为广大车主…

发电机综合测试系统

发电机综合测试系统是用于检测和评估发电机性能的设备。它能够对发电机的输出功率、电压、电流、频率、温度等参数进行实时监测和分析&#xff0c;以确保发电机的正常运行和高效性能。 发电机综合测试系统主要由以下几个部分组成&#xff1a; 数据采集模块&#xff1a;该模块负…

Kafka-RecordAccumulator分析

前面介绍过&#xff0c;KafkaProducer可以有同步和异步两种方式发送消息&#xff0c;其实两者的底层实现相同&#xff0c;都是通过异步方式实现的。 主线程调用KafkaProducer.send方法发送消息的时候&#xff0c;先将消息放到RecordAccumulator中暂存&#xff0c;然后主线程就…

信驰达科技参与《汽车玻璃集成UWB数字钥匙发展研究白皮书》编制工作

为进一步探索汽车数字钥匙技术路线及开发思路&#xff0c;中国智能网联汽车产业创新联盟&#xff08;CAICV&#xff09;、福耀玻璃工业集团股份有限公司联合发起了《汽车玻璃集成UWB数字钥匙发展研究白皮书》研究工作。 2023年12月20日&#xff0c;由中国智能网联汽车产业创新…

NFS的介绍与管理

NFS 文章目录 NFS1. nfs简介1.1 nfs特点1.2 nfs的应用场景1.3 nfs的体系组成 2. nfs工作机制2.1 RPC2.2 nfs工作机制 3. exports文件的格式4. nfs管理 1. nfs简介 1.1 nfs特点 NFS&#xff08;Network File System&#xff09;即网络文件系统&#xff0c;是FreeBSD支持的文件…

Defi安全--Zunami Protocol攻击事件分析

其它相关内容可见个人主页 1 Zunami攻击事件相关信息 2023.8.13发生在Ethereum上发生的攻击&#xff0c;存在两个攻击交易&#xff0c;具体信息如下&#xff1a; 攻击合约地址&#xff1a;Contract Address 攻击合约 攻击者地址&#xff1a;Zunami Protocol Exploiter 攻击…

vivado Revision Control

2020.2 只需要git 管理 prj.xpr 和 prj.srcs/ https://china.xilinx.com/video/hardware/ip-revision-control.html Using Vivado Design Suite with Revision Control https://www.xilinx.com/video/hardware/vivado-design-suite-revision-control.html http://www.xi…

《PCI Express体系结构导读》随记 —— 第I篇 第2章 PCI总线的桥与配置(16)

接前一篇文章&#xff1a;《PCI Express体系结构导读》随记 —— 第I篇 第2章 PCI总线的桥与配置&#xff08;15&#xff09; 2.3.2 PCI Agent设备的配置空间 在PCI Agent设备的配置空间中包含了许多寄存器&#xff0c;这些寄存器决定了该设备在PCI总线中的使用方法&#xff0…

Shiro漏洞

VULHUB部署环境 下载vulhub https://github.com/vulhub/vulhub/archive/master.zip?spma2c6h.12873639.article-detail.7.76036a98Plc8q5&filemaster.zip 进入漏洞文件夹直接部署 界面 漏洞 如果勾选记住账号&#xff0c;请求包会附带remember-me字段&#xff0c;服务…

MetaGPT入门(一)

本文在Win11操作系统下进行&#xff0c;工具pycharm 一、环境准备 1.建议使用conda虚拟环境 安装anaconda参考&#xff1a;Windows10下Anaconda的安装_windows anaconda 路径-CSDN博客 打开Anaconda Powershell Prompt命令窗口&#xff0c;输入下面命令&#xff0c;创建3.1…

专业课145+合肥工业大学833信号分析与处理考研经验合工大电子信息通信

今年专业课145也是考研科目中最满意的一门&#xff0c;其他基本相对平平&#xff0c;所以这里我总结一下自己的专业课合肥工业大学833信号分析与处理的复习经验。 我所用的教材是郑君里的《信号与系统》&#xff08;第三版&#xff09;和高西全、丁玉美的《数字信号处理》&…

Qt超简单实现贪吃蛇

文章目录 常量Snake类GameController类GUI显示游戏简图 为了能够最简单地完成程序&#xff0c;所以没有用类的继承等知识。感兴趣的朋友可以改写一下。 常量 const int FILE_SIZE 30; //地图方格大小 const int FPS 5000 / 33; //游戏运行帧率 enum Item{empty, wall, food…

1.环境部署

1.虚拟机安装redhat8系统 这个其实很简单&#xff0c;但是有一点小细节需要注意。 因为我的电脑是 16核心的&#xff0c;所以选择内核16&#xff0c;可以最大发挥虚拟机的性能 磁盘选择SATA&#xff0c;便于后期学习 将一些没用的设备移除 选择安装redhat 8 时间选择上海 选择…

jdbc-mysql

NotWritablePropertyException: Invalid property driverClass of beanclass (com.alibabadruid.pool.DruidDataSource] Bean property "driverClass mysql的配置有问题

web练习2

需求 1.计算用户指定的数值内的奇数和。例如用户输入的是10则计算13579的和 <!doctype html> <html lang"en"> <head><meta charset"utf-8"><title>作业1</title></head> <body> <script>//计算用…

黄金t+d与黄金期货交易的区别

在金融投资领域中&#xff0c;黄金是一种重要的避险工具和财富保值增值手段。对于投资者来说&#xff0c;了解并熟悉不同的黄金交易方式是至关重要的。其中&#xff0c;黄金TD和黄金期货交易是两种常见的黄金交易形式。那么&#xff0c;它们之间具体有哪些区别呢&#xff1f; 了…

光鉴科技的反卷思维,让科技不再难做

文 | 智能相对论 作者 | 陈壹 中国企业的全球竞争力&#xff0c;正从“拼人力、拼产能”转为“拼技术、拼创新”的新阶段。据世界知识产权组织发布的《世界知识产权指标报告》显示&#xff0c;2022年中国专利申请量约160万件&#xff0c;排名世界第一。而在最近发布的全球百强…