Eine kurze Analyse des Änderungserkennungsmechanismus in Angular

Was ist Änderungserkennung?

Im Anwendungsentwicklungsprozess stellt der Status die Daten dar, die in der Anwendung angezeigt werden müssen. Bei Zustandsänderungen ist häufig ein Mechanismus erforderlich, um den geänderten Zustand zu erkennen und die entsprechende Schnittstelle entsprechend zu aktualisieren. Dieser Mechanismus wird als Änderungserkennungsmechanismus bezeichnet. [Verwandte Tutorial-Empfehlungen: „Angular-Tutorial“]

Bei der WEB-Entwicklung führt die Aktualisierung der Anwendungsschnittstelle tatsächlich zu einer Änderung des DOM-Baums. Da DOM-Operationen teuer sind, führt eine ineffiziente Änderungserkennung zu einer schlechten Anwendungsleistung. Daher bestimmt die Effizienz des Frameworks bei der Implementierung des Änderungserkennungsmechanismus weitgehend seine Leistung.

Wie die Änderungserkennung implementiert wird

Angular kann erkennen, wenn sich Komponentendaten ändern, und die Ansicht dann automatisch neu rendern, um diese Änderung widerzuspiegeln. Aber wie kann dies nach einem Low-Level-Ereignis wie einem Tastendruck geschehen?

Durch Zone kann Angular automatisch den Änderungserkennungsmechanismus auslösen.

Was ist Zone? Kurz gesagt, Zone ist ein Ausführungskontext, der als Ausführungsumgebung verstanden werden kann. Im Gegensatz zu herkömmlichen Browserausführungsumgebungen werden alle über diesen Link ausgeführten asynchronen Aufgaben als Tasks Zone bezeichnet und bieten eine Reihe von Hooks für diese Aufgaben, sodass Entwickler die Umgebung problemlos „überwachen“ können.

Exkurs: Da Angular die Verwendung von Observables stark befürwortet, können Sie Zone ersetzen, um die Funktion zum Verfolgen des Aufrufstapels zu implementieren, wenn Sie eine Anwendung entwickeln, die vollständig auf Observables basiert. Die Leistung ist dann etwas besser als bei der Verwendung von Zone. .

  // Angular 在 v5.0.0-beta.8 起可以通过配置不使用 Zone 
  import { platformBrowser } from '@angular/platform-browser';
  platformBrowser().bootstrapModuleFactory(AppModuleNgFactory, { ngZone: 'noop' });

Überschreiben Sie den Browser-Standardmechanismus

Angular schreibt beim Start die Low-Level-API des Browsers neu, z. B. addEventListener, eine Browserfunktion, die zum Registrieren aller Browserereignisse, einschließlich Klicks, verwendet wird Handhabung. Angular ersetzt addEventListener durch ein neues Äquivalent dazu: addEventListener，它是用于注册所有浏览器事件的浏览器函数，包括点击处理。Angular 将替换addEventListener为与此等效的新版本：

// this is the new version of addEventListener                                    
function addEventListener(eventName, callback) { 
    // call the real addEventListener                
    callRealAddEventListener(eventName, function() { 
        //first call the original callback              
        callback(...);
        // and then run Angular-specific functionality
        var changed = angular.runChangeDetection();
        if (changed) {
            angular.reRenderUIPart();
        }
    });
}

新的addEventListener为任何事件处理程序添加了更多功能：不仅调用了注册的回调，而且 Angular 有机会运行更改检测并更新 UI。

支持浏览器异步 API

修补了以下常用浏览器机制以支持更改检测：

• 所有浏览器事件（单击、鼠标悬停、按键等）
• setTimeout()和setInterval()
• Ajax HTTP 请求

事实上，Zone.js 修补了许多其他浏览器 API，以透明地触发 Angular 更改检测，例如 Websockets。

这种机制的一个限制是，如果由于某种原因 Zone.js 不支持的异步浏览器 API，则不会触发更改检测。例如，IndexedDB 回调就是这种情况。

默认的变更检测机制是如何工作的？

每个 Angular 组件都有一个关联的变更检测器，它是在应用程序启动时创建的。例如：

@Component({
    selector: 'todo-item',
    template: `<span class="todo noselect" 
       (click)="onToggle()">{{todo.owner.firstname}} - {{todo.description}}
       - completed: {{todo.completed}}</span>`
})
export class TodoItem {
    @Input()
    todo:Todo;

    @Output()
    toggle = new EventEmitter<Object>();

    onToggle() {
        this.toggle.emit(this.todo);
    }
}

该组件将接收一个 Todo 对象作为输入，并在 todo 状态被切换时发出一个事件。

export class Todo {
    constructor(public id: number, 
        public description: string, 
        public completed: boolean, 
        public owner: Owner) {
    }
}

我们可以看到 Todo 有一个属性owner，它本身就是一个具有两个属性的对象：firstname和lastname。

变更检测器是什么样的？

我们实际上可以在运行时看到变化检测器的样子！要查看它，只需在 Todo 类中添加一些代码以在访问某个属性时触发断点。

当断点命中时，我们可以遍历堆栈跟踪并查看变化检测：

这个方法一开始可能看起来很奇怪，所有变量都奇怪命名。但是通过深入研究，我们注意到它在做一些非常简单的事情：对于模板中使用的每个表达式，它会将表达式中使用的属性的当前值与该属性的先前值进行比较。

如果前后的属性值不同，就会设置isChanged 为true，就这样！差不多，它是通过使用一个名为looseNotIdentical() 的方法来比较值。

那么嵌套对象owner呢？

我们可以在更改检测器代码中看到 owner 嵌套对象的属性也正在检查差异。但只比较 firstname 属性，而不是 lastname 属性。这是因为组件template中没有使用lastname

@Component({
    selector: 'todo-list',
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: ...
})
export class TodoList {
    ...
}

Der neue addEventListener fügt jedem Event-Handler mehr Funktionalität hinzu: Es werden nicht nur registrierte Rückrufe aufgerufen, und Angular verfügt über eine Möglichkeit, die Änderungserkennung auszuführen und die Benutzeroberfläche zu aktualisieren.

Unterstützt die asynchrone Browser-API🎜🎜🎜Die folgenden gängigen Browsermechanismen wurden gepatcht, um die Änderungserkennung zu unterstützen: 🎜

• Alle Browserereignisse (Klick, Mausbewegung, Tastendruck usw.)
• setTimeout() und setInterval()
• Ajax HTTP-Anfrage
🎜Tatsächlich patcht Zone.js viele andere Browser-APIs, um die Erkennung von Angular-Änderungen transparent auszulösen, z. B. Websockets. 🎜🎜Eine Einschränkung dieses Mechanismus besteht darin, dass die Änderungserkennung nicht ausgelöst wird, wenn Zone.js aus irgendeinem Grund die asynchrone Browser-API nicht unterstützt. Dies ist beispielsweise bei IndexedDB-Rückrufen der Fall. 🎜

🎜Wie funktioniert der Standardmechanismus zur Änderungserkennung? 🎜🎜🎜Jeder Angular-Komponente ist ein Änderungsdetektor zugeordnet, der beim Start der Anwendung erstellt wird. Zum Beispiel: 🎜

@Component({
    selector: 'app',
    template: `<div>
                    <todo-list [todos]="todos"></todo-list>
               </div>
               <button (click)="toggleFirst()">Toggle First Item</button>
               <button (click)="addTodo()">Add Todo to List</button>`
})
export class App {
    todos:Array = initialData;

    constructor() {
    }

    toggleFirst() {
        this.todos[0].completed = ! this.todos[0].completed;
    }

    addTodo() {
        let newTodos = this.todos.slice(0);
        newTodos.push( new Todo(1, "TODO 4", 
            false, new Owner("John", "Doe")));
        this.todos = newTodos;
    }
}

🎜Diese Komponente empfängt ein Todo-Objekt als Eingabe und gibt ein Ereignis aus, wenn der Todo-Status umgeschaltet wird. 🎜

ngAfterViewChecked() {
    if (this.callback && this.clicked) {
        console.log("changing status ...");
        this.callback(Math.random());
    }
}

🎜Wir können sehen, dass Todo ein Attribut owner hat, das selbst ein Objekt mit zwei Attributen ist: firstname und lastname. 🎜

🎜Wie sieht ein Änderungsdetektor aus? 🎜🎜🎜Wir können tatsächlich sehen, wie der Änderungsdetektor zur Laufzeit aussieht! Um es zu sehen, fügen Sie einfach etwas Code in der Todo-Klasse hinzu, um einen Haltepunkt auszulösen, wenn auf eine bestimmte Eigenschaft zugegriffen wird. 🎜🎜Wenn der Haltepunkt erreicht wird, können wir durch den Stack-Trace gehen und die Änderungserkennung sehen: 🎜🎜🎜🎜Diese Methode mag auf den ersten Blick seltsam aussehen, da alle Variablen seltsam benannt sind. Doch als wir genauer hinschauten, stellten wir fest, dass es etwas sehr Einfaches bewirkt: Für jeden in der Vorlage verwendeten Ausdruck vergleicht es den aktuellen Wert der im Ausdruck verwendeten Eigenschaft mit dem vorherigen Wert dieser Eigenschaft. 🎜🎜Wenn die Eigenschaftswerte davor und danach unterschiedlich sind, wird isChanged auf true gesetzt, das war's! Es vergleicht Werte praktisch mit einer Methode namens looseNotIdentical(). 🎜

🎜Was ist mit dem verschachtelten Objekt owner? 🎜🎜🎜Wir können im Änderungserkennungscode sehen, dass auch die Eigenschaft owner des verschachtelten Objekts auf Unterschiede überprüft wird. Es wird jedoch nur das Attribut firstname verglichen, nicht das Attribut lastname. Dies liegt daran, dass lastname nicht in der Komponente template verwendet wird! Ebenso wird das Top-Level-ID-Attribut von Todo aus demselben Grund nicht verglichen. 🎜🎜Damit können wir mit Sicherheit sagen: 🎜

默认情况下，Angular Change Detection 通过检查模板表达式的值是否已更改来工作。

我们还可以得出结论：

默认情况下，Angular 不做深度对象比较来检测变化，它只考虑模板使用的属性

为什么默认情况下更改检测会这样工作？

Angular 的主要目标之一是更加透明和易于使用，因此框架用户不必费尽心思调试框架并了解内部机制即可有效地使用它。

如果 Angular 默认更改检测机制基于组件输入的参考比较而不是默认机制，那会是什么情况？即使是像 TODO 应用程序这样简单的东西也很难构建：开发人员必须非常小心地创建一个新的 Todo，而不是简单地更新属性。

OnPush 变化检测策略

如果你觉得默认模式影响了性能，我们也可以自定义 Angular 更改检测。将组件更改检测策略更新为OnPush：

@Component({
    selector: 'todo-list',
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: ...
})
export class TodoList {
    ...
}

现在让我们在应用程序中添加几个按钮：一个是通过直接改变列表的第一项来切换列表的第一项，另一个是向整个列表添加一个 Todo。代码如下所示：

@Component({
    selector: 'app',
    template: `<div>
                    <todo-list [todos]="todos"></todo-list>
               </div>
               <button (click)="toggleFirst()">Toggle First Item</button>
               <button (click)="addTodo()">Add Todo to List</button>`
})
export class App {
    todos:Array = initialData;

    constructor() {
    }

    toggleFirst() {
        this.todos[0].completed = ! this.todos[0].completed;
    }

    addTodo() {
        let newTodos = this.todos.slice(0);
        newTodos.push( new Todo(1, "TODO 4", 
            false, new Owner("John", "Doe")));
        this.todos = newTodos;
    }
}

现在让我们看看这两个新按钮的行为：

• 第一个按钮“切换第一项”不起作用！这是因为该toggleFirst()方法直接改变了列表中的一个元素。
  TodoList无法检测到这一点，因为它的输入参考todos没有改变
• 第二个按钮确实有效！请注意，该方法addTodo()创建了 todo 列表的副本，然后将项目添加到副本中，最后将 todos 成员变量替换为复制的列表。这会触发更改检测，因为组件检测到其输入中的参考更改：它收到了一个新列表！
• 在第二个按钮中，直接改变 todos 列表是行不通的！我们真的需要一个新的清单。

OnPush只是通过引用比较输入吗？

情况并非如此。当使用 OnPush 检测器时，框架将在 OnPush 组件的任何输入属性更改、触发事件或 Observable 触发事件时检查

尽管允许更好的性能，但OnPush如果与可变对象一起使用，则使用会带来很高的复杂性成本。它可能会引入难以推理和重现的错误。但是有一种方法可以使使用OnPush可行。

使用 Immutable.js 简化 Angular 应用程序的构建

如果我们只使用不可变对象和不可变列表来构建我们的应用程序，则可以OnPush透明地在任何地方使用，而不会遇到更改检测错误的风险。这是因为对于不可变对象，修改数据的唯一方法是创建一个新的不可变对象并替换之前的对象。使用不可变对象，我们可以保证：

• 新的不可变对象将始终触发OnPush更改检测
• 我们不会因为忘记创建对象的新副本而意外创建错误，因为修改数据的唯一方法是创建新对象

实现不可变的一个不错的选择是使用Immutable.js库。该库为构建应用程序提供了不可变原语，例如不可变对象（映射）和不可变列表。

避免变更检测循环：生产与开发模式

Angular 更改检测的重要属性之一是，与 AngularJs 不同，它强制执行单向数据流：当我们的控制器类上的数据更新时，更改检测运行并更新视图。

如何在 Angular 中触发变更检测循环？

一种方法是如果我们使用生命周期回调。例如，在TodoList组件中，我们可以触发对另一个组件的回调来更改其中一个绑定：

ngAfterViewChecked() {
    if (this.callback && this.clicked) {
        console.log("changing status ...");
        this.callback(Math.random());
    }
}

控制台中将显示一条错误消息：

EXCEPTION: Expression '{{message}} in App@3:20' has changed after it was checked

仅当我们在开发模式下运行 Angular 时才会抛出此错误消息。如果我们启用生产模式会发生什么？ 在生产模式下，错误不会被抛出，问题也不会被发现。

在开发阶段始终使用开发模式会更好，因为这样可以避免问题。这种保证是以 Angular 总是运行两次变更检测为代价的，第二次检测这种情况。在生产模式下，变更检测只运行一次。

打开/关闭变化检测，并手动触发它

在某些特殊情况下，我们确实想要关闭更改检测。想象一下这样一种情况，大量数据通过 websocket 从后端到达。我们可能只想每 5 秒更新一次 UI 的某个部分。为此，我们首先将更改检测器注入到组件中：

constructor(private ref: ChangeDetectorRef) {
    ref.detach();
    setInterval(() => {
      this.ref.detectChanges();
    }, 5000);
  }

正如我们所看到的，我们只是分离了变化检测器，这有效地关闭了变化检测。然后我们只需每 5 秒通过调用手动触发它detectChanges()。

现在让我们快速总结一下我们需要了解的关于 Angular 变更检测的所有内容：它是什么，它是如何工作的以及可用的主要变更检测类型是什么。

概括

Angular 更改检测是一个内置的框架功能，可确保组件数据与其 HTML 模板视图之间的自动同步。

更改检测的工作原理是检测常见的浏览器事件，如鼠标点击、HTTP 请求和其他类型的事件，并确定每个组件的视图是否需要更新。

变更检测有两种类型：

• 默认更改检测：Angular 通过比较事件发生前后的所有模板表达式值来决定是否需要更新视图，用于组件树的所有组件
• OnPush 更改检测：这通过检测是否已通过组件输入或使用异步管道订阅的 Observable 将某些新数据显式推送到组件中来工作

Angular默认更改检测机制实际上与 AngularJs 非常相似：它比较浏览器事件之前和之后模板表达式的值，以查看是否有更改。它对所有组件都这样做。但也有一些重要的区别：

一方面，没有变化检测循环，也没有 AngularJs 中命名的摘要循环。这允许仅通过查看其模板和控制器来推理每个组件。

另一个区别是，由于变化检测器的构建方式，检测组件变化的机制要快得多。

最后，与 AngularJs 不同的是，变化检测机制是可定制的。

更多编程相关知识，请访问：编程教学！！

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des Änderungserkennungsmechanismus in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!