Question

正如标题所述：我正在做一个非常大的项目，并且在少数几个组件中，我使用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>

该组件具有许多输入和输出，并且还使用Subjects和BehaviorSubjects与其他组件进行通信。

Answer 1

ChangeDetectionStrategy.OnPush告诉Angular该组件仅取决于其@Inputs()，仅在以下情况下才需要检查：

输入参考更改。

一个事件源自该组件或其子组件。

我们明确运行更改检测。

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

Answer 2

否否和否。 Angular已经为任何代码引入了很多复杂性，但是它带给您许多功能，例如变更检测。如果您从Angular中删除更改检测，那么您将遇到所有不好的事情而没有好的事情。如果页面中没有成千上万的组件，则在删除更改检测方面不会有任何明显的改进。

所以：

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

Answer 3

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

对于继承的项目，建议从叶子组件开始应用OnPush策略，并检查一切仍在工作。

仅在这一点上，跟随祖先并一次向上攀升至根。最终，整体性能将受益。

Here there is a very good article about change detection in Angular。

应该使用ChangeDetectionStrategy.OnPush进行传送吗？

3 个答案: