Angular 默认的Change detection策略及缺陷

默认策略下，用户事件，计时器，XHR，promise等事件触发，所有的组件都会执行变更检测。

看一个实际例子：

import { Component, OnInit, Input } from '@angular/core';@Component({selector: 'appparentchild',template: `<h1>title</h1>{{ JerryHelloChange }}<child [childContent] = "parentContent"></child>`
})
export class ParentChildComponent implements OnInit {public parentContent = 'Jerry 222';constructor() { }get JerryHelloChange(){console.log('change in parent view');return true;}ngOnInit(): void {this.parentContent = '1';let c = setTimeout;setTimeout(() => this.parentContent = '2', 3000);}}@Component({selector: 'child',template: `<h1>This is child</h1><h2>{{ childContent }}</h2><button (click)="onClick()">Click Me to trigger Change</button> <span>{{ childContent }}</span>`
})
export class ChildComponent{@Input()childContent: string;onClick(){setTimeout(()=>{ console.log('timeout!')}, 3000);}
}

测试结果：

测试发现，即使onClick本身的逻辑不会触发任何Component数据的改变，change detection仍然会不断触发。

如果将changeDetectionStrategy改成push：

import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';@Component({selector: 'appparentchild',template: `<h1>title</h1>{{ JerryHelloChange }}<child [childContent] = "parentContent"></child>`,changeDetection: ChangeDetectionStrategy.OnPush
})
export class ParentChildComponent implements OnInit {public parentContent = 'Jerry 222';constructor() { }get JerryHelloChange(){console.log('change in parent view');return true;}ngOnInit(): void {this.parentContent = '1';let c = setTimeout;setTimeout(() => {this.parentContent = '2';console.log('change in parent');}, 3000);}}@Component({selector: 'child',template: `<h1>This is child</h1><h2>{{ childContent }}</h2><button (click)="onClick()">Click Me to trigger Change</button> <span>{{ childContent }}</span>`
})
export class ChildComponent{@Input()childContent: string;onClick(){setTimeout(()=>{ console.log('timeout!')}, 3000);}
}

则虽然我在ngOnInit里将this.parentContent改成了2，但是页面仍然没有刷新，仍然是1：

需要点一下按钮才能触发页面刷新：

更多Jerry的原创文章，尽在：“汪子熙”:

Angular 默认的Change detection策略及缺陷相关推荐

深入理解 Angular 变化检测（change detection）
引言本文分享一些讲解Angular Change Detection的文章,并指出其中有意思的内容,以及自己的一些总结和引申. Angular Change Detection Explained ...
[译] 关于Angular的变更检测（Change Detection）你需要知道这些
原文地址:Everything you need to know about change detection in Angular 如果你像我一样,想对Angular的变更检测机制有一个深入的理解, ...
Angular Change Detection 的学习笔记
Angular 变化检测机制比 AngularJs 中的等效机制更透明且更易于推理.但是在某些情况下(例如在进行性能优化时),我们确实需要知道幕后发生了什么.因此,让我们通过以下主题深入了解变更检测: ...
【论文笔记】Hierarchical Paired Channel Fusion Network for Street Scene Change Detection
论文论文题目:Hierarchical Paired Channel Fusion Network for Street Scene Change Detection 收录:IEEE Transac ...
2022年 change detection遥感图像变化检测论文附代码
1.Remote Sensing Change Detection using Denoising Diffusion Probabilistic Models 论文代码 22-6 动机: 可用于训 ...
变化检测综述 Deep learning for change detection in remote sensing images: comprehensive review and me
Deep learning for change detection in remote sensing images: comprehensive review and meta-analysis ...
论文阅读：SCDNET: A novel convolutional network for semantic change detection in high resolution optical
SCDNET:一种用于高分辨率光学遥感图像变化检测网络变化检测新的网络架构 SCD的局限性提出的SCDNET架构网络结构多尺度空洞卷积模块注意力机制 LOSS函数实验结论变化检测变 ...
[Audio processing] Harmonic change detection function (HCDF)
Harmonic change detection function (HCDF) 是根据 Tonal Centroid (TC)实现的,首先TC如何提取? Step 1. 提取PCP特征 Step ...
【论文笔记】DR-TANet: Dynamic Receptive Temporal Attention Network for Street Scene Change Detection
论文论文题目:DR-TANet: Dynamic Receptive Temporal Attention Network for Street Scene Change Detection 收录: ...

Angular 默认的Change detection策略及缺陷

Angular 默认的Change detection策略及缺陷相关推荐

最新文章

热门文章