What is change detection? The following article will talk about the change detection mechanism in Angular, introduce how status changes notify change detection, and Angular change detection strategy. I hope it will be helpful to everyone.
Summary: A change检测机制that traverses the component tree, checks for changes in each component, and triggers DOM updates when component properties change. [Recommended related tutorials: "angular tutorial"]
The basic task of change detection: Obtain the internal状态of the program and make可见in the user interface. This state can be any object, array, or basic data type.
Event-driven sources fall into the following three categories:
Events: page click, submit, mouse down...
XHR: Get data from the backend server
Timers: setTimeout(), setInterval()
These points have one thing in common, that is, they are all asynchronous, that is to say, all异步操作are the root factors that may cause data changes, so whenever some asynchronous operations are performed, the state of our application may change. At this time, you need to update the view
In Angular NgZone is connected, which monitors all异步事件of Angular. Angular will rewrite (through Zone.js ) some of the underlying browser APIs at startup (violently intercepting all asynchronous events).
There are two common ways to trigger change detection. One method is based on component life cycle hooks.
ngAfterViewChecked() {
console.log('cluster-master.component cd');
}Another method is to manually control change detection on or off and trigger it manually
constructor(private cd: ChangeDetectorRef) {
cd.detach()
setInterval(() => {
this.cd.detectChanges()
}, 5000)
} The core of Angular is componentization. The nesting of components will eventually form a组件树. Angular's change detection can be divided into components. Each component has a corresponding变化检测器ChangeDetector . It is conceivable that these change detectors are also will form a tree.
In Angular each component has its own change detector, which allows us to control how and when change detection is performed for each component.
Angular also gives developers the ability to customize change detection strategies.
default:每次change detection will cause change detection of the component, including state changes of其他组件and changes in the internal attribute values of the reference variables本组件
Onpush: Each change detection will skip the change check of this component unless满足一些条件.
4.1 default
Angular's default change detection mechanism is ChangeDetectionStrategy.Default . After each asynchronous event callback ends, NgZone will trigger整个组件树to perform change detection至上而下
4.2 onPush
OnPush strategy, used to跳过change detection of a component and所有子组件below it
In fact, after setting the OnPush policy, there are still many ways to trigger change detection;
1)引用of the component's @Input attribute changes.
2) DOM events within the component, including DOM events of its sub-components, such as click、submit、mouse down .
3) Observable in the component subscribes to the event and sets Async pipe at the same time.
4) Manually use ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick() methods in the component
markForCheck(): Used for子组件该子组件到根组件, notifying the angular detector一定check the components on this path during the next change detection, even if the change detection strategy is set to onPush
detectChanges(): Manually initiate change detection from该组件到各个子组件
detach():脱离the component's detector from the number of detectors and no longer be controlled by the detection mechanism unless reattached.
reattach():重新链接the detached detector to the detector tree