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

Event-driven, the sources have the following three categories:

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

This Several points have one thing in common, that is, they are all asynchronous, that is to say, all

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

In

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).

There are two common ways to trigger change detection. One method is based on the component's life cycle hook

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

The other method is to manually control the opening or closing of change detection, and manually Trigger

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

3. Angular change detection

The core of Angular is componentization, and the nesting of components will eventually form a

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

Angular also gives developers the ability to customize change detection strategies.

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

Angular’s ​​default change detection mechanism is

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>

OnPush strategy is used to

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

In fact,

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

1) The

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

5. Change detection object reference

markForCheck(): used for

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!