角度 markForCheck 与 detectChanges

Question

我将从 我在 StackOverflow 上看到类似问题的概念开始这个问题，但这个问题只回答了差异。

我要问的是我应该根据情况使用什么以及一种或另一种方法可能有什么缺点。

我知道detectChanges 对元素及其子元素运行即时更改检测周期，同时markForCheck 仅将当前元素及其祖先标记为脏，并且应在下一个更改检测周期检查它们。

我问这个主要是因为我觉得我不应该总是在异步调用中使用markForCheck。

例如，我有一个InputComponent，它是常规 HTML 输入的包装器。这个InputComponent 启用了ChangeDetectionStrategy.OnPush。

当我对服务器进行异步调用并获取数据时，我需要在 InputComponent 上运行更改检测以更新选项列表，我有两个选项。

首先（我觉得我应该使用的）是detectChanges，因为它只会对这个确切的组件应用检查，而markForCheck 会导致检查整个树枝。

那么我应该使用什么，我需要使用markForCheck 吗？为什么？

Answer 1

我要问的是我应该根据情况使用什么以及一种或另一种方法可能有什么缺点。

您应该永远不要致电detectChanges()。

detectChanges() 为开发人员提供价值的情况并不理想。它通常用在程序员没有很好地管理组件的不变性、状态管理和变异的项目中。

所有需要detectChanges()的源代码都可以重写，使其不再需要。

另一方面，markForCheck() 确实有很好的边缘情况，应该使用它。

我问这个主要是因为我觉得我不应该总是在异步调用中使用 markForCheck。

您经常会在调用markForCheck() 的源代码附近找到对this 的引用。

@Component({...})
export class ExampleComponent {
    //......
    public function work() {
        this.httpClient.get(...).subscribe(resp => 
            this.data = resp.data;
            this.changeDetectorRef.markForCheck();
        });
    }
}

在函数式编程中，对this 的引用是不纯的，它会改变函数范围之外的外部状态。打破函数式编程最佳实践会引入需要修复以保持一切正常的问题。如果您只使用异步操作编写纯函数，则无需调用 markForCheck()，但一旦引入 this 引用，组件状态就会发生变化，并且需要通知视图。

上面没有错，但同时在 RxJS 订阅中过度使用this 会产生难以维护的源代码。

最好重写源代码以使用响应式编程，并在模板中使用async 管道。关键是创建无状态的组件，这样组件上的属性就不需要更新了。一切都是作为反应流完成的。

@Component({
    template: `<ng-container *ngIf="data$ | async as data">
               <!-- stuff -->
               </ng-container>`,
    // .....
})
export class ExampleComponent {
    public data$: Observable<any>;

    public function work() {
        this.data$ = this.httpClient.get(...).pipe(shareReplay(1));
    }
}

如果您将组件设计为无状态，并使用 RxJS 进行所有数据处理，则不需要使用 markForCheck()。即使您侦听 DOM 事件，也可以将数据通过管道传输到其他可观察对象以避免使用 this。

虽然有时您必须致电markForCheck()。我建议您停止并重新考虑您的方法以避免使用它，因为应该有另一种不需要它的方法。