What is change detection? Let's talk about angular's ​​change mechanism

What is change detection? The following article will talk about the change detection mechanism in Angular, and introduce how status changes notify change detection and Angular change detection strategy. I hope it will be helpful to everyone.

1. What is change detection

• Summary: A change detection mechanism, Used to traverse the component tree, check the changes of each component, and trigger the update of DOM when the component properties change. [Related tutorial recommendations: "angular tutorial"]
• Basic tasks of change detection: Obtain the internal status of the program and make it visible in the user interface ##. This state can be any object, array, or basic data type.

2. What caused the change

Events : Page click, submit, mouse down...
• XHR: Get data from the back-end server
• Timers: setTimeout(), setInterval()

asynchronous operations are the root factors that may cause data changes, so whenever some asynchronous operations are performed, our application The status may change, and at this time you need to update the view

3. How to notify change detection of status changes

Angular, receive Introduced NgZone, which listens to all Angular's asynchronous events. Angular will rewrite (through Zone.js) some of the underlying browser APIs when it starts. (Violently intercepts all asynchronous events).

ngAfterViewChecked() {
    console.log('cluster-master.component cd');
  }

constructor(private cd: ChangeDetectorRef) {
  cd.detach()
  setInterval(() => {
    this.cd.detectChanges()
  }, 5000)
}

3. Angular change detection

component tree , Angular's change detection can be divided into components. Each component has a corresponding ChangeDetector. It is conceivable that these change detectors will also 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.

4. Change detection strategy

default:
• Each change detection will cause component change detection, including status changes of other components, and this component Changes in internal attribute values ​​of reference variables
Onpush: Each change detection will skip the change check of this component unless
• some conditions are met

4.1 default

ChangeDetectionStrategy.Default. After each asynchronous event callback ends, NgZone will trigger the entire component Tree Top downDo change detection

4.2 onPush<span style="font-size: 18px;"></span>

skip the change detection of a component and all sub-components below it

OnPush# is set ## After the strategy, there are still many ways to trigger change detection;

reference
• of the @Input attribute of the component changes. 2)
DOM
• events within the component, including DOM events of its sub-components, such as click, submit, mouse down. 3) The
Observable
• in the component subscribes to the event and sets the Async pipe at the same time. 4) Manually use
ChangeDetectorRef.detectChanges(), ChangeDetectorRef.markForCheck(), ApplicationRef.tick()
• within the component

subcomponent
• to mark the path between this subcomponent and the root component , notify the angular detector to must check the components on this path during the next change detection, even if the change detection strategy is set to onPushdetectChanges(): manually initiated
Change detection from this component to each sub-component
• detach(): Remove the component's detector from the number of detectors
and no longer be controlled by the detection mechanism , unless reattach
• reattach(): Relink the detached detector to the detector tree
• For more programming related knowledge, please visit : Programming Video
! !

The above is the detailed content of What is change detection? Let's talk about angular's ​​change mechanism. For more information, please follow other related articles on the PHP Chinese website!