Table of Contents
Angular’s OnPush strategy
To improve Angular performance
changeDetection: ChangeDetectionStrategy.OnPush,introduced.
This allows changes to be detected only when the input property changes, or when the component itself or its child components fire an event.
In the first place, Angular’s default change detection is
- browser event
- timer event
- HTTP request completion
- Promise resolution/rejection
It seems that when a browser event occurs in , all components are subject to change detection.
In other words, the cost is extremely high.
Therefore, the OnPush strategy becomes important.
By the way, best practice is
Do not apply OnPush by default, and consider introducing it only if performance becomes an issue or if it meets the characteristics of “components that should consider OnPush” listed above.
That’s what he said.
If you introduce this, there will be cases where Angular cannot automatically detect changes, such as when data is updated asynchronously or when properties of objects whose references do not change are updated.
Therefore, ChangeDetectorRef is used to explicitly detect the change.
ChangeDetectorRef provides a reference to the component’s change detector
ChangeDetectorRef has four methods that give developers fine control over the timing of change detection.
markForCheck
Method to mark things that need to be checked in the next change detection cycle.
Simply calling markForCheck() does not cause change detection to be performed immediately; it will be detected during the next change detection cycle.
“Next check, don’t forget to look at this component!” When should I use it? When the data in the component changes asynchronously (e.g. setTimeout or the result of an HTTP request), but the data “box” (reference) itself does not change. By default, Angular does not notice if the contents of the box have changed.
detectChanges
Force a change detection cycle immediately. Frequent calls can affect performance.
“Now! Check this component and update its appearance!” When should you use it? When the data in the component changes asynchronously (e.g. setTimeout or the result of an HTTP request), but the data “box” (reference) itself does not change. By default, Angular does not notice if the contents of the box have changed.
detach()
Detaches the current component from the change detection tree. The component and its descendants will no longer be checked in subsequent change detection cycles until explicitly reattach(). This can be used when a component rarely changes.
“Please let this component rest for a while!” When should you use it? When data is updated in a place that Angular normally does not detect (e.g. inside ngZone.runOutsideAngular()), or when you really want to update the screen immediately at a specific timing.
reattach()
Reattach detached components with detach() to the change detection tree. It is once again included in the normal change detection cycle.
“Holiday is over! Check back!” When should you use it? You have a component whose data rarely changes or whose screen does not need to be updated unless certain conditions are met. This is useful when you have a large number of components and want to rest some of them to reduce the overall load.
Hmm, it was the first time I tried to understand it properly after playing around with it for about two years.
