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

Question

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

1. 首先是在视图中直接使用服务中的可观察对象，我不确定该方法是否有效。https://blog.angular-university.io/onpush-change-detection-how-it-works/。
2. 另一种选择是使用 immutable.js 但在这种情况下，我不知道创建对象是否非常灵活，我知道在列表的情况下更容易。

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

Answer 1

1. 使用带有async管道的Observables是一个非常有效的选项，我经常使用它。Angular 能够检查 Observable 何时发出值，并标记您的组件以检测更改。
2. Immutable.js 也是一个有效的选择，但我个人觉得有点过于冗长。在我当前的项目中，我更喜欢使用ES6 spread operator。例如更新属性使用const newObj = {...obj, prop: newValue}，将项目插入数组const newArray = [...array, newItem]。但是，您必须确保整个团队都采用这种方法，因为无法像 Immutable.js 那样强制执行不变性。

我的团队正在使用page - component模式。例如，我们需要创建一个功能来更新用户详细信息。在这种情况下，我会创建user-page.component和user-form.component。用户page.component为容器用户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 官方示例应用程序使用相同的方法。