angular - 应该对所有事情都使用 ChangeDetectionStrategy.OnPush 吗？

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>

该组件有很多 Input 和 Output，并且还使用 Subjects 与其他组件通信和 BehaviorSubjects .

Answer 1

ChangeDetectionStrategy.OnPush告诉 Angular 该组件只依赖于它的 @Inputs()并且仅在以下情况下需要检查:

输入引用更改。

事件源自组件或其子组件之一。

我们明确地运行变更检测。

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