angular - 使用 OnPush 更改检测的最佳方法

Question

最好的使用方法是什么OnPush更改检测可以使更改灵活并且在测试中也非常简单？通过各种教程，我发现可以使用 OnPush :

首先是在 View 中直接使用服务中的可观察对象，我不确定该方法是否有效。 https://blog.angular-university.io/onpush-change-detection-how-it-works/ .

另一种选择是使用 immutable.js 但在这种情况下，我不知道创建对象是否非常灵活，我知道在列表的情况下更容易。

也许你知道不同的方法然后我列出的这个？

Answer 1

将 Observable 与 async 一起使用pipe 是一个非常有效的选项，我经常使用它。 Angular 能够检查 Observable 何时发出值，并标记您的组件以检测更改。

Immutable.js 也是一个有效的选择，但我个人觉得有点过于冗长。在我当前的项目中，我更喜欢使用 ES6 spread operator .例如更新属性使用 const newObj = {...obj, prop: newValue} , 将项插入数组 const newArray = [...array, newItem] .但是，您必须确保整个团队都采用这种方法，因为无法像 Immutable.js 那样强制执行不变性。

我的团队正在使用 page - component图案。例如，我们需要创建一个功能来更新用户详细信息。在这种情况下，我会创建 user-page.component和 user-form.component . user-page.component 是 user-form.component 的容器。

user-form.component 有 ChangeDetectionStrategy.OnPush 并且它不与服务交互，它只有一些输入属性(比如 @Input user: User )并发出 @Output 事件(例如 @Output update = new EventEmitter<User>() )。它是一个“哑”组件，它只更新表单并发出事件。

user-page.component 是与服务交互、设置输入属性并监听 user-form.component 的人事件。它的模板标记通常只包含子组件:

<app-user-form [user]="user$ | async" (update)="onUpdate($event)"></app-user-form>

user$ 是一个来自服务或商店的 Observable，它通过异步管道传递到 user-form.component 中。 onUpdate 是当用户单击 user-form.component 上的更新按钮时调用的函数，它调用 API 服务来更新用户详细信息。

遵循此模式将与服务交互的组件和仅显示数据的组件分开，允许您控制更改检测。顺便说一下 NGRX official example app使用相同的方法。