讯号的 Local Change Detection

Change Detection 的历史

Angular 团队在企业应用程式的效能方面做出了许多改进。组件中的 Change Detection 的预设值是ChangeDetection.Default。这意味着组件无论其状态如何，总是运行 Change Detection。当使用预设值时，未修改的元件必须不必要地执行 Change Detection。当应用程式具有大型元件树 (component tree) 时，这可能会损害应用程式的效能，其中一个变更可能会触发所有元件执行 Change Detection。

然后，团队引入了 OnPush change strategy，减少了组件树中组件之间的 change detection 次数。

@Component({
selector: \'app-on-push-grand-child\',
template: `...inline template…`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushGrandChildComponent {}

当元件加入 changeDetection: ChangeDetectionStrategy.OnPush 时，它使用 OnPush change strategy 来执行 change detection。在以下情况下，元件将运行 change detection：

它接收新的输入，或
由 AsyncPipe 解析的 Observable，或者
它运行一个 event listener，或者
讯号更新。

OnPush change strategy 优化了效能，但 Angular 17 引入了 local change detection (局部变化侦测)，它只会更新讯号更新的元件，而忽略元件树的其余部分。

Default Change Strategy（始终运行）

Change strategy 的预设值为 Default。当元件具有 Default change strategy 时，无论是否已修改，change detection 都会运作。我们举个例子来解释一下。

export function getCurrentTime(): string {
return new Date(Date.now()).toISOString();
}

@Component({
selector: \'app-default-grand-child\',
template: `
<p>{{ showCurrentTime() }}</p>
<p>Counter: {{ count() }}</p>
<button (click)="add()">Add</button>`
})
export class DefaultGrandChildComponent {
count = signal(0);

add(delta=1) {
this.count.update((prev) => prev + delta);
}

showCurrentTime() {
return getCurrentTime();
}
}

DefaultGrandChildComponent 元件具有 Default change strategy。它有一个增加 count 讯号的按钮，showCurrentTime 方法显示当前时间。

@Component({
selector: \'app-default-child\',
imports: [DefaultGrandChildComponent],
template: `
<p>{{ showCurrentTime() }}</p>
<p>Internal Count: {{ count() }}</p>
<button (click)="add()">Add</button>
<app-default-grand-child />`
})
export class DefaultChildComponent {
count = signal(0);

add(delta=1) {
this.count.update((prev) => prev + delta);
}

showCurrentTime() {
return getCurrentTime();
}
}

DefaultChildComponent 元件也具有 Default change strategy，并且是 DefaultGrandChildComponent 元件的父元件。类似地，它有一个按钮来增加 count 讯号和 showCurrentTime 来显示当前时间。

@Component({
selector: \'app-root\',
imports: [OnPushChildComponent, DefaultChildComponent],
template: `
<p>{{ showCurrentTime() }}</p>
<button (click)="counterService.add()">Add CounterService value</button>
<app-on-push-child />
<app-on-push-child />
<app-default-child />
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
counterService = inject(CounterService);

showCurrentTime() {
return getCurrentTime();
}
}

AppComponent 是 DefaultChildComponent 元件的父元件，它有 OnPush change strategy。

场景 1：按钮点选发生在 DefaultGrandChildComponent 元件中

该元件被标记为 dirty。当侦测到变化时，此元件会增加 count 讯号并显示当前时间。 DefaultChildComponent 元件是其父元件；因此，DefaultChildComponent 被标记为 dirty。 AppComponent 是 DefaultChildComponent 元件的父元件；因此，它被标记为 dirty。 OnPushChildComponent 的 change strategy 是 OnPush；它没有接收新的输入，event listener 没有运行，没有 AsyncPipe，也没有更新讯号。因此，它不会被标记为 dirty，并且其子树 (subtree) 会被忽略。

当 change detection 发生时，AppComponent、 DefaultChildComponent 和 DefaultGrandChildComponent 元件会更新。

场景二：按钮点选发生在DefaultChildComponent元件中

类似地，DefaultChildComponent 和 AppComponent 元件也被标记为 dirty。 DefaultGrandChildComponent 具有 Default change strategy；因此，尽管其状态没有改变，但它被标记为 dirty。

当 change detection 发生时，AppComponent、DefaultChildComponent 和 DefaultGrandChildComponent 元件会更新。 Default change strategy 效能不佳，因为 DefaultChildComponent 的子树 (subtree) 始终运行。当其子树增长时，应用程式会变得缓慢，因为所有元件都被标记为 dirty，并且更新所有元件。

OnPush 变更策略（效能最佳化）

@Injectable({
providedIn: \'root\'
})
export class CounterService {
private readonly value = signal(0);
readValue = this.value.asReadonly();

add(delta=1) {
this.value.update((prev) => prev + delta);
}
}

CounterService 服务具有 add 方法增加的 value 讯号。 readValue 是 value 讯号的唯读讯号。

@Component({
selector: \'app-on-push-grand-child\',
template: `
<p>{{ showCurrentTime() }}</p>
<p>Internal Counter: {{ count() }}</p>
<p>Counter Service value: {{ counterService.readValue() }}</p>
<button (click)="add()">Add</button>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushGrandChildComponent {
count = signal(0);
counterService = inject(CounterService);

add(delta=1) {
this.count.update((prev) => prev + delta);
}

showCurrentTime() {
return getCurrentTime();
}
}

OnPushGrandChildComponent 元件具有 OnPush change strategy。它有一个增加 count 讯号的按钮，showCurrentTime 方法显示当前时间。此外，它还注入了 CounterService 来显示 readValue 讯号的值。

@Component({
selector: \'app-on-push-child\',
imports: [OnPushGrandChildComponent],
template: `
<p>{{ showCurrentTime() }}</p>
<p>Internal Count: {{ count() }}</p>
<button (click)="add()">Add</button>
<app-on-push-grand-child />
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushChildComponent {
count = signal(0);

add(delta=1) {
this.count.update((prev) => prev + delta);
}

showCurrentTime() {
return getCurrentTime();
}
}

OnPushChildComponent 元件也具有 OnPush change strategy，并且是 OnPushGrandChildComponent 元件的父元件。类似地，它有一个按钮来增加 count 讯号和 showCurrentTime 方法来显示当前时间。

场景 1：按钮点选发生在 OnPushGrandChildComponent 元件中

该元件被标记为 dirty。当侦测到变化时，此元件会增加 counter 讯号并显示当前时间。 OnPushChildComponent 是它的父元件；因此，OnPushChildComponent 被标记为 dirty。 AppComponent 是 OnPushChildComponent 元件的父元件；因此，它被标记为 dirty。 DefaultChildComponent 的 change strategy 是 Default；它的子树 (subtree) 总是被更新。

当 change detection 发生时，AppComponent、DefaultChildComponent、DefaultGrandChildComponent、OnPushChildComponent 和 OnPushGrandChildComponent 元件都会更新。

场景二：按钮点击发生在 OnPushChildComponent 元件中

类似地，AppComponent 和 DefaultChildComponent 的子树也被标记为 dirty。 OnPushGrandChildComponent 具有 OnPush change strategy，并且不符合任何 change detectio 标準。它没有接收新的输入，没有运作 event listener，没有 AsyncPipe，也没有讯号更新；因此，它没有被标记为 dirty。

当变更侦测发生时，AppComponent、DefaultChildComponent、DefaultGrandChildComponent 和 OnPushChildComponent 元件会更新。 OnPush change strategy 优化了应用程式的效能，因为当子树 (subtree) 不符 change detection 标準时，它们不会执行 change detection。当子树增长时，只有根和触发事件的元件之间的元件才会被标记为 dirty 并更新。受影响组件的数量显着减少。

本地变化检测 (Local Change Detection)

在 Angular 17 中，团队为讯号添加了 local change detection。讯号更新时，只有一个组件被标记为 dirty 并更新。

@Component({
selector: \'app-root\',
imports: [OnPushChildComponent, DefaultChildComponent],
template: `
<p>{{ showCurrentTime() }}</p>
<button (click)="counterService.add()">Add CounterService value</button>
<div class="child" >
<app-on-push-child />
<app-on-push-child />
<app-default-child />
</div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
counterService = inject(CounterService);

showCurrentTime() {
return getCurrentTime();
}
}

当 AppComponent 元件点击按钮时，它会增加 CounterService 的 value 讯号。由于运行了 event listener，因此它被标记为 dirty。

@Component({
selector: \'app-on-push-grand-child\',
template: `
<p>{{ showCurrentTime() }}</p>
<p>Counter Service value: {{ counterService.readValue() }}</p>
<button (click)="add()">Add</button>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushGrandChildComponent {
count = signal(0);
counterService = inject(CounterService);

add(delta=1) {
this.count.update((prev) => prev + delta);
}

showCurrentTime() {
return getCurrentTime();
}
}

OnPushGrandChildComponent 元件在模板中显示 CounterService 的 value 讯号；因此将其标记为dirty。它的父元件 OnPushChildComponent 并未因为 local change detection 而被标记为 dirty 元件。

假设 DefaultChildComponent 和 DefaultGrandChildComponent 不存在，则只更新 AppComponent 和 OnPushGrandChildComponent 元件。如果在 OnPushChildComponent 和 OnPushGrandChildComponent 之间插入更多元件，local change detection 将确保这些元件不会被标记为 dirty。 Change detection 的数量固定为三个；一个用于 AppComponent，另外两个用于两个 OnPushGrandChildComponent 元件。

我们应该从 local change detection 中获益，并在现代 Angular 开发中使用讯号来实现 reactivity，

参考：

Skipping subtrees - OnPush: https://angular.dev/best-practices/skipping-subtrees
Location Change Detection by nivek: https://www.youtube.com/watch?v=Zhj5rSbir84
Local Change Detection by Rainer Hahnekamp: https://medium.com/ngconf/local-change-detection-in-angular-410d82b38664
Stackblitz Demo: https://stackblitz.com/edit/stackblitz-starters-t6r5bnyv?file=src%2Fmain.ts

讯号的 Local Change Detection

Change Detection 的历史

Default Change Strategy（始终运行）

场景 1：按钮点选发生在 DefaultGrandChildComponent 元件中

场景二：按钮点选发生在DefaultChildComponent元件中

OnPush 变更策略（效能最佳化）

场景 1：按钮点选发生在 OnPushGrandChildComponent 元件中

场景二：按钮点击发生在 OnPushChildComponent 元件中

本地变化检测 (Local Change Detection)

参考：

近期文章

分类

讯号 的 Local Change Detection

Change Detection 的历史

Default Change Strategy（始终运行）

场景 1：按钮点选发生在 DefaultGrandChildComponent 元件中

场景二：按钮点选发生在DefaultChildComponent元件中

OnPush 变更策略（效能最佳化）

场景 1：按钮点选发生在 OnPushGrandChildComponent 元件中

场景二：按钮点击发生在 OnPushChildComponent 元件中

本地变化检测 (Local Change Detection)

参考：

相关文章

标签

近期文章

分类

讯号的 Local Change Detection