current position:Home>Change detection strategy of angular component

Change detection strategy of angular component

2022-05-15 02:12:54Maple moving forward

attribute :changeDetection   

Change detection strategy for the current component

@Component({
  selector: 'app-xxx',
  templateUrl: 'XXX',
  styleUrls: ['XXX'],
  changeDetection:ChangeDetectionStrategy.OnPush
})

When the component is instantiated ,Angular A change detector will be created , It is responsible for propagating the changes of each binding value of the component . The policy has the following values :

ChangeDetectionStrategy.Default

The default policy , Perform a dirty check , As long as the value changes , Conduct comprehensive change detection from parent component to child component . The test is comprehensive , But when there are many components , Low detection efficiency .

ChangeDetectionStrategy.OnPush

When entering data @Input When the reference of changes or an event triggers , Change detection is only carried out for components . Incomplete testing , But the detection efficiency is high .

Use ChangeDetectionStrategy.OnPush strategy , How to actively trigger change detection ?

ChangeDetectorRef

It is Angular The basic classes of various views , Provide change detection function . The change detection tree collects all the views to be checked . Use these methods to add or remove views from the tree 、 Initialize change detection and explicitly mark these views as dirty , It means they have changed 、 Need to re render .

It has five ways :

markForCheck():  When view is used OnPush When changing the detection strategy , Explicitly mark the view as changed , So that it can detect changes again .

detach():   Separate the view from the change detection tree . Detached views are not checked until they are reattached . And detectChanges() Use a combination of , Local change detection can be realized .

detectChanges():   Check the view and its child views . And detach Combined use can realize local change detection .

checkNoChanges():   Check the change detector and its sub detectors , If any changes are detected , Throw an exception .

reattach():   Reattach the previously separated views to the change detection tree . The view will be attached to the tree by default .

Use : 

import { ChangeDetectionStrategy,ChangeDetectorRef } from '@angular/core';

@component({
    selector: 'xxx',
    exportAs: 'xxx',
    changeDetection: ChangeDetectionStrategy.OnPush
})

constructor(
    private: cdr:ChangeDetectorRef
){}

haha(){
    this.cdr.markForCheck(); // Call... When needed 
}

Detailed principle :https://www.jianshu.com/p/d8ebb6daf993?utm_campaign=haruki

                  https://juejin.im/post/6844903504218161160

                  https://juejin.im/post/6844904017836032007

                  https://blog.csdn.net/weixin_33898233/article/details/88878652

                  https://blog.csdn.net/xwnxwn/article/details/82725408

copyright notice
author[Maple moving forward],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120524480757.html

Random recommended