时间戳

首页 > 解决方案 > 我可以为所有项目做关于推送变更检测的架构吗？

angular - 我可以为所有项目做关于推送变更检测的架构吗？

问题描述

我将在 Angular 8 上开始新的大项目。我为所有组件设置下一行

@Component({
...
changeDetection: ChangeDetectionStrategy.OnPush,
...
})

我可以做这样的项目吗？或者在某些情况下我是否必须放弃 OnPush 策略来实施项目

标签： angular

解决方案

是的，您可以使用它，但更重要的是，我建议在实际需要的地方使用它，否则您将陷入不易出错的代码和性能问题。

所以，changeDetectionStrategy由 Angular 核心库提供。我正在分享一个我在项目中使用过的简单用例，基于此，您可以在需要的地方关联和使用它。

考虑页面上的两个组件。

  1. 表格组件（显示数据10K行10列）
  2. 表单组件（接受用户输入并进行验证等并提交按钮以在表格中添加数据）

假设您已经有 10K 行和 10 列 (10K*10) 单元格 (td)

并且用户正在使用验证器填写表单角度验证表单并运行更改检测周期。

因此，更改检测周期在 dom 树中从上到下运行，它将针对表格中的所有 (10K*10) 单元格运行并使其变慢，您会注意到 IE 浏览器的性能问题，或者如果使用 chrome 有更多数据。

所以当用户与表单交互时，我们不需要对表格组件进行变更检测，这里可以在表格组件中使用onPush策略。这将显着提高性能。

这是摘要

[(10K*10) + 表单控件]在编辑表单时对每个更改检测周期进行对象检查

onPush策略后

[表单控件] 对象检查每个更改检测周期。

注意：在onPush策略中，当通过引用使用组件的更改输入数据时，它将触发更改检测策略

onFormSubmit(){
  this.rows.push(this.formObject); // this will trigger change detection in table
}
<form-component></form-component>
<table-component [data]="rows"></table-component>

推荐阅读