Angular의 변경 감지 메커니즘에 대한 간략한 분석-JS 튜토리얼-php.cn

Angular의 변경 감지 메커니즘에 대한 간략한 분석

변경 감지란 무엇입니까?

애플리케이션 개발 프로세스에서 상태는 애플리케이션에 표시해야 하는 데이터를 나타냅니다. 상태가 변경되면 변경된 상태를 감지하고 이에 따라 해당 인터페이스를 업데이트하는 메커니즘이 필요한 경우가 많습니다. 이 메커니즘을 변경 감지 메커니즘이라고 합니다. [관련 튜토리얼 추천: "angular tutorial"]

WEB 개발에서 애플리케이션 인터페이스 업데이트는 실제로 DOM 트리를 수정하는 것입니다. DOM 작업은 비용이 많이 들기 때문에 비효율적인 변경 감지로 인해 애플리케이션 성능이 저하됩니다. 따라서 변경 감지 메커니즘을 구현하는 프레임워크의 효율성이 성능을 크게 결정합니다.

변경 감지 구현 방법

Angular는 구성 요소 데이터가 변경되는 시기를 감지한 다음 해당 변경 사항을 반영하도록 뷰를 자동으로 다시 렌더링할 수 있습니다. 하지만 버튼 클릭과 같은 하위 수준 이벤트 후에 이를 어떻게 수행할 수 있습니까?

Zone을 통해 Angular는 자동으로 변경 감지 메커니즘을 실행할 수 있습니다.

존이란 무엇인가요? 간단히 말해서 Zone은 실행 환경으로 이해될 수 있는 실행 컨텍스트입니다. 일반적인 브라우저 실행 환경과 달리 이 링크에서 실행되는 모든 비동기 작업을 작업이라고 합니다. Zone은 이러한 작업에 대한 여러 후크를 제공하므로 개발자는 모든 비동기 작업을 쉽게 "모니터링"할 수 있습니다.

여론: Angular는 Observable 사용을 강력히 권장하므로 전적으로 Observable을 기반으로 애플리케이션을 개발하는 경우 Zone을 대체하여 호출 스택 추적 기능을 구현할 수 있으며 성능은 Zone을 사용하는 것보다 약간 더 좋습니다. .

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

로그인 후 복사

브라우저 기본 메커니즘 재정의

Angular는 클릭을 포함하여 모든 브라우저 이벤트를 등록하는 데 사용되는 브라우저 기능인 addEventListener와 같은 시작 시 브라우저 하위 수준 API를 다시 작성합니다. 손질. Angular는 addEventListener를 다음과 같은 새 항목으로 대체합니다. 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: &#39;todo-item&#39;,
    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 类中添加一些代码以在访问某个属性时触发断点。

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

Angular의 변경 감지 메커니즘에 대한 간략한 분석

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

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

那么嵌套对象`owner`呢？

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

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

로그인 후 복사

새로운 addEventListener는 모든 이벤트 핸들러에 더 많은 기능을 추가합니다. 등록된 콜백만 호출되는 것이 아니라 Angular에는 변경 감지를 실행하고 UI를 업데이트할 기회입니다.

브라우저 비동기 API 지원🎜🎜🎜변경 감지를 지원하기 위해 다음과 같은 일반적인 브라우저 메커니즘을 패치했습니다. 🎜

모든 브라우저 이벤트(클릭, 마우스 호버, 키 등)
setTimeout() 및 setInterval()
Ajax HTTP 요청

🎜기본 변경 감지 메커니즘은 어떻게 작동하나요? 🎜🎜🎜모든 Angular 구성 요소에는 애플리케이션이 시작될 때 생성되는 관련 변경 감지기가 있습니다. 예: 🎜

@Component({
    selector: &#39;app&#39;,
    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;
    }
}

로그인 후 복사

🎜이 구성 요소는 Todo 객체를 입력으로 받고 todo 상태가 전환될 때 이벤트를 내보냅니다. 🎜

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

로그인 후 복사

🎜Todo에는 이름 및 성이라는 두 가지 속성이 있는 객체인 owner 속성이 있음을 알 수 있습니다. 🎜

🎜변화 감지기는 어떤 모습인가요? 🎜🎜🎜런타임에 변경 감지기가 어떻게 보이는지 실제로 볼 수 있습니다! 이를 보려면 Todo 클래스에 일부 코드를 추가하여 특정 속성에 액세스할 때 중단점을 트리거하면 됩니다. 🎜🎜중단점에 도달하면 스택 추적을 살펴보고 변경 감지를 확인할 수 있습니다. 🎜🎜🎜🎜이 메서드는 모든 변수의 이름이 이상해 처음에는 이상해 보일 수 있습니다. 그러나 더 깊이 파고들자 우리는 이것이 매우 간단한 작업을 수행하고 있음을 발견했습니다. 즉, 템플릿에 사용된 각 표현식에 대해 표현식에 사용된 속성의 현재 값을 해당 속성의 이전 값과 비교합니다. 🎜🎜전후 속성 값이 다를 경우 `isChanged`가 true로 설정됩니다. 거의 `looseNotIdentical()`이라는 메서드를 사용하여 값을 비교합니다. 🎜

🎜중첩 개체 `owner`는 어떻습니까? 🎜🎜🎜변경 감지 코드에서 중첩된 개체의 `owner` 속성도 차이점을 확인하고 있음을 확인할 수 있습니다. 그러나 `lastname` 속성이 아닌 `firstname` 속성만 비교됩니다. 이는 `성`이 구성요소 `템플릿`에 사용되지 않기 때문입니다! 마찬가지로 Todo의 최상위 id 속성도 같은 이유로 비교되지 않습니다. 🎜🎜이를 통해 다음과 같이 안전하게 말할 수 있습니다. 🎜
默认情况下，Angular Change Detection 通过检查模板表达式的值是否已更改来工作。
我们还可以得出结论：
默认情况下，Angular 不做深度对象比较来检测变化，它只考虑模板使用的属性

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

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

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

`OnPush` 变化检测策略

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

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

로그인 후 복사

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

@Component({
    selector: &#39;app&#39;,
    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 &#39;{{message}} in App@3:20&#39; 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 不同的是，变化检测机制是可定制的。

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

위 내용은 Angular의 변경 감지 메커니즘에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

Angular의 변경 감지 메커니즘에 대한 간략한 분석

변경 감지란 무엇입니까?

변경 감지 구현 방법

브라우저 기본 메커니즘 재정의

支持浏览器异步 API

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

变更检测器是什么样的？

那么嵌套对象`owner`呢？

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

`OnPush` 变化检测策略

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

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

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

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

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

概括

Angular의 변경 감지 메커니즘에 대한 간략한 분석

변경 감지란 무엇입니까?

변경 감지 구현 방법

브라우저 기본 메커니즘 재정의

支持浏览器异步 API

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

变更检测器是什么样的？

那么嵌套对象owner呢？

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

OnPush 变化检测策略

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

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

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

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

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

概括

那么嵌套对象`owner`呢？

`OnPush` 变化检测策略

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