- 变化检测策略:OnPush
变化检测策略:OnPush
要通知Angular,我们将遵守前面提到的条件以提高性能,我们将在MovieComponent中使用OnPush 变化检测策略。
app/movie.component.ts
@Component({// ...changeDetection: ChangeDetectionStrategy.OnPush}export class MovieComponent {// ...}
View Example
这将通知Angular我们的组件只取决于它的输入,并且传递给它的任何对象应该被认为是不可变的。这次当我们点击“Change Actor Properties”按钮时视图不会发生任何变化。
让我们再回顾一下它背后的逻辑。 当用户单击按钮时,调用方法changeActorPropertiesis并更新actor对象的属性。
当变化检测分析绑定到AppComponent模板的属性时,它将看到与之前相同的景象:
- Is
slogan !== previousSloganNo, it’s the same. - Is
title !== previousTitle? No, it’s the same. - Is
actor !== previousActor? No, it’s the same.
但是这一次,我们明确告诉Angular,我们的组件只取决于它的输入,并且它们都是不可变的。 然后,Angular假定MovieComponent没有改变,并且将跳过对该组件的检查。 因为我们没有强制actor对象是不可变的,所以我们的模型与视图不同步。
让我们重新运行应用程序,但这次我们将点击“Change Actor Object”按钮。 这次,我们创建一个Actor类的新实例,并将其分配给this.actor对象。 当变化检测分析与AppComponent模板绑定的属性时,它会发现:
- Is
slogan !== previousSloganNo, it’s the same. - Is
title !== previousTitle? No, it’s the same. - Is
actor !== previousActor? Yes, it has changed.
因为变化检测现在知道actor对象改变了(它是一个新的实例),它将继续检查模板,以便MovieComponent更新其视图。 最后,我们的视图模版和数据模型是同步的。
