代码之家 › 专栏 › 技术社区 › Jacopo Sciampi

是否应使用ChangeDetectionStrategy.OnPush进行所有操作?

angular

2

Jacopo Sciampi · 技术社区 · 7 年前

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 .

2 回复 | 直到 6 年前

1

6

Artyom Amiryan 7 年前

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

输入引用更改。

源于组件或其子组件之一的事件。

我们显式地运行更改检测。

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

2

1

Christian Vincenzo Traina 7 年前

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

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

3

0

Ferie 6 年前

OnPush 建议采用这种策略来减少变更检测过程,因为这是一项非常昂贵的操作。

对于继承的项目,建议开始应用从叶组件中选择策略,并检查所有内容是否仍在工作。

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