是否应该使用ChangeDetectionStrategy.OnPush进行任何操作



正如标题所说:我正在进行一个非常大的项目,在一些组件中,我使用了ChangeDetectionStrategy.OnPush来避免糟糕的性能。我想知道,在每个组件中放入该策略,并在需要时使用ChangeDetectionRef.detectChanges()以编程方式更新组件,这"好"吗?

--

这是我在应用程序中的一个小组件:

<my-map
(updatedGeometry)="setUpdatedGeometry($event)"
[startGraphEdit]="elementToEdit" [startCut]="elementToCut"
[startCopy]="elementToCopy"
[updateGraph]="elementToUpdate"
[showElement]="elementToShow"
(selectedProfile)="setProfile($event)"
[reducedChange]="reducedChange"
(reduceComposer)="setReducedComposer($event)"
[labelsVisible]="labelsVisible"
(visibleComposer)="setVisibleComposer($event)"
[activateLayers]="activeLayers"
(curLayers)="setCurrentLayers($event)"
[loadExtent]="extentToLoad"
(extent)="setExtent($event)"
[updateZoom]="newZoom"
(curZoom)="setCurrentZoom($event)"
(curLon)="setCurrentLon($event)"
(curLat)="setCurrentLat($event)"
(poiNotesOffset)="setPoiNotesOffset($event)"
[cancelPoiNoteCreation]="visibleDetailPanel"
(poiNoteUpdatedPosition)="setPoiNoteUpdatedPosition($event)"
[updatePoiNotePosition]="poiNotesElementForUpdate"
[removePoiNoteElement]="poiNotesElementForDeletion"
[updatePoiNotes]="updatePoiNotes"
[projectCode]="prjCode"
(poiNote)="poiNote($event)"
[setPrecisionPointerValues]="precisionPointerValues"
(precisionPointerValues)="updatePrecisionPointer($event)"
(exploreToolArea)="setExploreToolArea($event)"
(extentArea)="setExtentArea($event)"
[exploreToolRadius]="exploreToolRadius"
(newExploreToolRadius)="setExploreToolRadius($event)"
[currEnvironment]="currEnvironment"
(elementSelected)="onElementClick($event)"
[setaClasses]="classes"
[height]="mapHeight"
[width]="mapWidth"
[offsetX]="mapOffsetX"
[offsetY]="mapOffsetY"
[geometriesToHighlight]="geometriesToHighlight"
[highlightLineElements]="lineElements"
(poiList)="setPoiList($event)">
</my-map>

该组件具有大量的输入和输出,并且还使用SubjectsBehaviorSubjects与其他组件进行通信。

ChangeDetectionStrategy.OnPush告诉Angular,组件仅依赖于其@Inputs(),仅在以下情况下需要检查:

输入引用发生更改

源自组件或其子级之一的事件

我们显式运行更改检测

因此,这取决于您的组件的内容以及您试图用它实现的目标。例如,如果您的订阅使用async管道,则您的组件不需要ChangeDetectionStrategy.OnPush,因为async会自动完成这项工作。如果您的组件很大并且使用了大量数据更改,那么它应该包含OnPush策略,因为它会提高您的性能,所以您的整个组件代码不会在每次更改时都运行。如果你的组件很小,只有几个属性和方法,或者它不包含任何订阅或@Input的,或者不做任何经常发生的数据更改,你就不需要ChangeDetectionStrategy.OnPush

特别是对于非常大的项目,建议使用OnPush策略来减少更改检测过程,因为这是一项非常昂贵的操作。

对于继承的项目,建议从叶组件开始应用OnPush策略,并检查是否一切正常。

只有在这一点上,跟随祖先,一次上升一个层次,直到根。最终,整体性能将受益。

这里有一篇关于Angular中的变化检测的非常好的文章。

TLDR:NO

Angular已经为任何代码引入了很多复杂性,但它为您提供了很多功能,例如更改检测。如果你从Angular中删除了变化检测,那么你就得到了所有的坏而没有好。如果你的页面中没有数千个组件,那么你不会注意到在删除更改检测方面有任何明显的改进。

因此:

  • 始终使用更改检测
  • 在特定情况下分离更改检测,在这种情况下,深入检查对象会显著降低性能

相关内容

最新更新