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

文章目录

    • 前言
    • 变更检测的原理
      • 脏检查
      • 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的变更检测机制有所帮助!

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

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

相关文章

grep 在运维中的常用可选项

一、对比两个文件 vim -d <filename1> <filename2> 演示&#xff1a; 需求&#xff1a;&#xff5e;目录下有两个文件一个test.txt 以及 text2.txt,需求对比两个文件的内容。 执行后会显示如图&#xff0c;不同会高亮。 二、两次过滤 场景&#xff1a;当需要多…

如何用AI提高论文阅读效率?

已经2024年了&#xff0c;该出现一个写论文解读AI Agent了。 大家肯定也在经常刷论文吧。 但真正尝试过用GPT去刷论文、写论文解读的小伙伴&#xff0c;一定深有体验——费劲。其他agents也没有能搞定的&#xff0c;今天我发现了一个超级厉害的写论文解读的agent &#xff0c…

rust跟我学六:虚拟机检测

图为RUST吉祥物 大家好,我是get_local_info作者带剑书生,这里用一篇文章讲解get_local_info是怎么检测是否在虚拟机里运行的。 首先,先要了解get_local_info是什么? get_local_info是一个获取linux系统信息的rust三方库,并提供一些常用功能,目前版本0.2.4。详细介绍地址:…

标准ERP产品的许可期限为,2023-12-22,当前已超过使用期限,请联系系统管理员更新许可或者删除超期的许可

项目场景&#xff1a; 金蝶云星空客户端 问题描述 标准ERP产品的许可期限为&#xff0c;2023-12-22&#xff0c;当前已超过使用期限&#xff0c;请联系系统管理员更新许可或者删除超期的许可! 原因分析&#xff1a; 这个报错提示是金蝶对第三方行业许可强制绑定,行业许可到…

Android PendingIntent 闪退

先来给大家推荐一个我日常会使用到的图片高清处理在线工具&#xff0c;主要是免费&#xff0c;直接白嫖 。 有时候我看到一张图片感觉很不错&#xff0c;但是图片清晰度不合我意&#xff0c;就想有没有什么工具可以处理让其更清晰&#xff0c; 网上随便搜下就能找到&#xff…

MySQL创建表及插入数据

一、创建英雄表&#xff08;hero&#xff09; mysql> use db_han Database changed mysql> create table hero(-> name varchar(20) primary key,-> nickname varchar(20),-> address varchar(20),-> groups varchar(20),-> emile int,-> telephone i…

6.3.1认识Camtasia4(2)

6.3.2录制声音 Camtasia4也可以用来录制声音&#xff0c;不过它在音频的录制与处理上要比GoldWave5差了很多。 1&#xff0e;在Camtasia Studio主程序中&#xff0c;单击【工具】|【Camtasia音频编辑器】&#xff0c;启动Camtasia音频编辑器。在弹出的欢迎界面中&#xff0c;…

如何在网络爬虫中解决CAPTCHA?使用Python进行网络爬虫

网络爬虫是从网站提取数据的重要方法。然而&#xff0c;在进行网络爬虫时&#xff0c;常常会遇到一个障碍&#xff0c;那就是CAPTCHA&#xff08;全自动公共图灵测试以区分计算机和人类&#xff09;。本文将介绍在网络爬虫中解决CAPTCHA的最佳方法&#xff0c;并重点介绍CapSol…

redis数据安全(三)数据持久化 AOF

接上一篇RDB&#xff0c;本篇看下Redis数据持久化的第二种方式AOF。 目录 一、AOF原理 1、写入机制&#xff1a; 2、缓冲机制&#xff1a; 3、重写机制 &#xff1a; 4、运行流程 二、AOF文件配置 1、开启AOF&#xff1a; 2、自动触发AOF重写 3、重写规则&#xff1…

山海鲸:金融机构数据管理的得力助手

在当今数字化的时代&#xff0c;数据已经成为金融机构的核心资产和决策依据。然而&#xff0c;如何有效地管理和分析这些数据&#xff0c;成为了金融机构面临的挑战。这时&#xff0c;一款强大的数据可视化工具显得尤为重要&#xff0c;山海鲸可视化正是这样一款助力金融机构轻…

ElasticSearch概述+SpringBoot 集成ES

ES概述 开源的、高扩展的、分布式全文检索引擎【站内搜索】 解决问题 1.搜索词是一个整体时&#xff0c;不能拆分&#xff08;mysql整体连续&#xff09; 2.效率会低&#xff0c;不会用到索引&#xff08;mysql索引失效&#xff09; 解决方式 进行数据的存储&#xff08;只存储…

【中大主办会议】第五届电子通讯与人工智能国际学术会议(ICECAI 2024)

第五届电子通讯与人工智能国际学术会议&#xff08;ICECAI 2024&#xff09; 2024 5th International Conference on Electronic communication and Artificial Intelligence 第五届电子通讯与人工智能国际学术会议&#xff08;ICECAI 2024&#xff09;将于2024年5月31日-6月…

导入失败,报错:“too many filtered rows xxx, “ErrorURL“:“

一、问题&#xff1a; 注&#xff1a;前面能正常写入&#xff0c;突然就报错&#xff0c;导入失败&#xff0c;报错&#xff1a;“too many filtered rows xxx, "ErrorURL":" {"TxnId":769494,"Label":"datax_doris_writer_bf176078-…

【算法Hot100系列】接雨水

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

分销商城多端uniapp 可编译5端 - 等级提现额度

等级提现额度 等级提现额度是一种常见的财务管理策略&#xff0c;通常用于在线平台、金融服务或游戏中&#xff0c;用于控制不同等级用户的提现限额。这样的机制有助于平台管理资金流动性&#xff0c;防范欺诈&#xff0c;并鼓励用户提升他们的活跃度或忠诚度。以下是一个简单的…

el-date-picker组件设置时间范围限制

需求&#xff1a; 如图所示&#xff0c;下图为新增的一个弹层页面&#xff0c;同时有个需求&#xff0c;日期选择需要限制一个月的时间范围&#xff08;一月默认为30天&#xff09;&#xff1a; 查看官方文档我们需要主要使用到如下表格的一些东西&#xff1a; 参数说明类型可…

java应用CPU过高查找原因

用top查到占用cpu最高的进程pid 根据进程ID找到占用CPU高的线程 ps -mp 60355 -o THREAD,tid | sort -r 用 printf "%x \n" 将tid换为十六进制&#xff1a;xid printf "%x \n" 6036 根据16进制格式的线程ID查找线程堆栈信息 jstack 60355 |grep ebcb -A…

[NISACTF 2022]babyserialize

[NISACTF 2022]babyserialize 题目做法及思路解析&#xff08;个人分享&#xff09; 题目平台地址&#xff1a;NSSCTF | 在线CTF平台 一、题目代码 查看分析代码&#xff0c;寻找漏洞点&#xff08;题目中注释为个人思路标注&#xff0c;实际代码中没有&#xff09; …

uniapp 使用canvas制作柱状图

效果图&#xff1a; 实现思路&#xff1a; 1、通过展示数据计算需要画几根柱子&#xff1b; 2、通过组件宽度、高度计算出每根柱子的宽度及高度&#xff1b; 3、for循环依次绘制每根柱子&#xff1b; 4、绘制柱子时&#xff0c;先绘制顶部百分比、value值&#xff0c;再绘制柱子…

1.机器学习-机器学习算法分类概述

机器学习-机器学习算法分类概述 个人简介机器学习算法分类&#xff1a;监督学习、无监督学习、强化学习一监督学习1. 监督学习分类任务举例&#xff1a;1.1 特征1.2 标签 二无监督学习1.关键特点2.应用示例3.常见的无监督学习算法 三强化学习1.定义2.示例场景 四机器学习开发流…