使用 OnPush 变化检测的最佳方式
Best way to use OnPush change detection
使用 OnPush 更改检测以灵活更改并在测试中非常简单的最佳方法是什么？通过各种教程，我发现了使用 OnPush:
的方法
- 首先是直接在视图中使用来自服务的主题的可观察对象我不确定该方法是否有效。 https://blog.angular-university.io/onpush-change-detection-how-it-works/.
- 另一种选择是使用 immutable.js 但在这种情况下，我不知道创建对象是否非常灵活，我知道在列表的情况下更容易。
也许你知道与我列出的不同的方法？
- 将 Observables 与
async 管道一起使用是一个非常有效的选项，我经常使用它。 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>()）。它是一个“dumb”组件，它只更新表单并发出事件。
user-page.component 是与服务交互、设置输入属性并监听 user-form.component 事件。它的模板标记通常只包含子组件：
<app-user-form [user]="user$ | async" (update)="onUpdate($event)"></app-user-form>
user$ 是一个来自服务或商店的 Observable，它被传递到 user-form.component通过 async 管道。 onUpdate 是当用户单击 user-form.component 上的更新按钮时调用的函数，它调用 API 服务来更新用户详细信息。
遵循此模式可以将与服务交互的组件与仅显示数据的组件分开，从而使您能够控制变更检测。顺便说一下 NGRX official example app 使用相同的方法。
使用 OnPush 更改检测以灵活更改并在测试中非常简单的最佳方法是什么？通过各种教程，我发现了使用 OnPush:
- 首先是直接在视图中使用来自服务的主题的可观察对象我不确定该方法是否有效。 https://blog.angular-university.io/onpush-change-detection-how-it-works/.
- 另一种选择是使用 immutable.js 但在这种情况下，我不知道创建对象是否非常灵活，我知道在列表的情况下更容易。
也许你知道与我列出的不同的方法？
- 将 Observables 与
async管道一起使用是一个非常有效的选项，我经常使用它。 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>()）。它是一个“dumb”组件，它只更新表单并发出事件。
user-page.component 是与服务交互、设置输入属性并监听 user-form.component 事件。它的模板标记通常只包含子组件：
<app-user-form [user]="user$ | async" (update)="onUpdate($event)"></app-user-form>
user$ 是一个来自服务或商店的 Observable，它被传递到 user-form.component通过 async 管道。 onUpdate 是当用户单击 user-form.component 上的更新按钮时调用的函数，它调用 API 服务来更新用户详细信息。
遵循此模式可以将与服务交互的组件与仅显示数据的组件分开，从而使您能够控制变更检测。顺便说一下 NGRX official example app 使用相同的方法。