角度变化检测过程重新绘制dom

概述我正在学习Angular变化检测过程并检查Chrome中的开发工具,我看到了奇怪的行为. 我的plnkr演示了这种行为：http://plnkr.co/edit/cTLF00nQdhVmkHYc8IOu 我有一个简单的组件与视图： <li *ngFor="let item of list">{{item.name}}</li> 和构造函数： constructor() { this.lis 我正在学习Angular变化检测过程并检查Chrome中的开发工具,我看到了奇怪的行为.

我的plnkr演示了这种行为：http://plnkr.co/edit/cTLF00nQdhVmkHYc8IOu

我有一个简单的组件与视图：

<li *ngFor="let item of List">{{item.name}}</li>

和构造函数：

constructor() {    this.List = [{name: 'Gustavo'},{name: 'Costa'}]

模拟我添加的简单请求：

// simulating request repaint the DOMsetInterval( () => {  this.List = [{name: 'Gustavo'},{name: 'Costa'}];},2000);

如果您注意到,数组列表会收到一个等于初始值的列表.让我们假设当Angular在变更检测过程中检查视图中的值时,我们有这样的代码：

if( oldname !== name )  { // ( 'Gustavo' !== 'Gustavo') // update the vIEw}

但是值是相同的,为什么角度每2秒重复一次DOM.？

但是如果我改变对象,则不会发生REPAINT

// simulating request there is not repaintsetInterval( () => {  this.List[0].name = "Gustavo"; // no repaint because it's the same value  this.List[1].name = "Costa 2"; // repaint},2000);

您可以使用上面的plnkr链接进行测试.

解决方法 这是因为Angular使用默认的trackByFunction来跟踪按标识跟踪项目的DefaultIterableDiffer.

const trackByIDentity = (index: number,item: any) => item;

很明显,当您创建一个新数组时,它会创建新的对象引用,而Angular会检测更改.即使您没有更改数组引用,Angular仍会认为项目已更改,因为对象引用更改：

setInterval( () => {  this.List.length = 0;  this.List.push({name: 'Gustavo'});  this.List.push({name: 'Costa'});},2000);

您可以为您提供自定义trackByFunction以按对象名称进行跟踪：

@Component({  selector: 'my-app',template: `   <li *ngFor="let item of List; trackBy:IDentify">{{item.name}}</li>  `})export class App {  List:[];  IDentify(index,item){     return item.name;   }

这样DOM就不会更新.见this plunker.

既然你是关于ng的好奇心,你也可以阅读this answer,其中我解释了ngFor如何工作.

总结

以上是内存溢出为你收集整理的角度变化检测过程重新绘制dom全部内容，希望文章能够帮你解决角度变化检测过程重新绘制dom所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。