8 javoblar

All above answers explain OnPush and Default, here I post an example about how it really works: https://plnkr.co/edit/hBYb5VOrZYEsnzJQF5Hk?p=preview

user-one.component.ts:

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

@Component({
  selector: 'user-one',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div>
      

{{ user.name }}

      
{{ user.age }} years old
      {{ user.location }} 
{{ user.email }} <button (click)="update()">Internal update</button>
* should not update </div> ` }) export class UserOneComponent { @Input() user; update() { this.user.name = 'Lebron James'; } }

foydalanuvchi-two.component.ts:

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

@Component({
  selector: 'user-two',
  changeDetection: ChangeDetectionStrategy.Default,
  template: `
    <div>
      

{{ user.name }}

      
{{ user.age }} years old
      {{ user.location }} 
{{ user.email }} <button (click)="update()">Internal update</button>
* should update </div> ` }) export class UserTwoComponent { @Input() user; update() { this.user.name = 'Kevin Durant'; } }

"This.user.email" yoki "this.user.name" kabi ob'ekt xususiyatlarini o'zgartirganimizda, UserTwoComponent har doim o'zgarishlarni yangilaydi, lekin UserOneComponent faqat yangi foydalanuvchi obyekti bo'lganimizda o'zgaradi.

Har bir tarkibiy qismning xususiyatlarini o'zgartirsangiz, masalan ChangeDectectionStrategy ni devralırsa, masalan, UserOneComponent ichida this.user.name'i o'zgartirsak, UserOneComponent va UserTwoComponent-da har ikkala nom o'zgaradi, lekin UserTwoComponent ichida nomni o'zgartirsak, UserTwoComponent ichida faqat nom o'zgartirish

9
qo'shib qo'ydi

All above answers explain OnPush and Default, here I post an example about how it really works: https://plnkr.co/edit/hBYb5VOrZYEsnzJQF5Hk?p=preview

user-one.component.ts:

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

@Component({
  selector: 'user-one',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div>
      

{{ user.name }}

      
{{ user.age }} years old
      {{ user.location }} 
{{ user.email }} <button (click)="update()">Internal update</button>
* should not update </div> ` }) export class UserOneComponent { @Input() user; update() { this.user.name = 'Lebron James'; } }

foydalanuvchi-two.component.ts:

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

@Component({
  selector: 'user-two',
  changeDetection: ChangeDetectionStrategy.Default,
  template: `
    <div>
      

{{ user.name }}

      
{{ user.age }} years old
      {{ user.location }} 
{{ user.email }} <button (click)="update()">Internal update</button>
* should update </div> ` }) export class UserTwoComponent { @Input() user; update() { this.user.name = 'Kevin Durant'; } }

"This.user.email" yoki "this.user.name" kabi ob'ekt xususiyatlarini o'zgartirganimizda, UserTwoComponent har doim o'zgarishlarni yangilaydi, lekin UserOneComponent faqat yangi foydalanuvchi obyekti bo'lganimizda o'zgaradi.

Har bir tarkibiy qismning xususiyatlarini o'zgartirsangiz, masalan ChangeDectectionStrategy ni devralırsa, masalan, UserOneComponent ichida this.user.name'i o'zgartirsak, UserOneComponent va UserTwoComponent-da har ikkala nom o'zgaradi, lekin UserTwoComponent ichida nomni o'zgartirsak, UserTwoComponent ichida faqat nom o'zgartirish

9
qo'shib qo'ydi

Use OnPush strategy if your objects are immutable and you doesn't change the state of the objects in your component. It will perform better rather than default where each change of the object make run change detector to resolve changes. More or less similar is described in Change Detection Strategy: OnPush

Yuqorida keltirilgan shartlarga rioya qilmoqchi ekanligimizni anglash uchun ish faoliyatini yaxshilash uchun OnPush o'zgartirishni aniqlash strategiyasidan foydalanamiz

Anglashuv hujjatlari

ChangeDetectionStrategy:

     
      
  • OnPush , hidratsiya vaqtida o'zgarish detektori rejimi CheckOnce ga o'rnatilganligini anglatadi.

  •   
  • Varsayılan , hidrasyon paytida o'zgarish detektörünün holati CheckAlways ga o'rnatilganligini bildiradi.

  •   
3
qo'shib qo'ydi
Ishlab chiquvchining o'zgartirgichni qo'l bilan boshqarayotganida OnPush degan ma'noni anglatadimi?
qo'shib qo'ydi muallif wonderful world, manba
hidrasyon nima?
qo'shib qo'ydi muallif EpicPandaForce, manba
Qaysi strategiyani qo'lda qo'llash mantiqan emas.
qo'shib qo'ydi muallif Roman C, manba
@EpicPandaForce Bu o'zgarish detektori qiladi.
qo'shib qo'ydi muallif Roman C, manba

Ushbu misol uni tushunishga yordam beradi:

Change_detection_strategy_onpush

angular2-with-immutablejs- and-redux

Shunday qilib, hodisa yuzaga kelganda nima sodir bo'ladi? Burchak 1.x da, digest sikllari ishdan chiqarilganda, har bir ulash butun ilovada ishga tushiriladi. Xuddi shunday Angular 2 da, har bir komponent ham tekshiriladi. Aniqrog'i o'zgarishlarni aniqlashni faqat bir voqea sodir bo'lganda o'rniga uning o'zgaruvchan xususiyatlaridan biri o'zgarib ketganligini anglatish salqin bo'ladimi? Biz burchakning ChangeDetectionStrategiyasi yordamida komponentlar darajasida foydalanishimiz mumkin.

OnPush faqatgina kirish xususiyatlariga e'tiborni qaratadi, barcha xususiyatlarni standart tekshiring.

2
qo'shib qo'ydi

Ushbu misol uni tushunishga yordam beradi:

Change_detection_strategy_onpush

angular2-with-immutablejs- and-redux

Shunday qilib, hodisa yuzaga kelganda nima sodir bo'ladi? Burchak 1.x da, digest sikllari ishdan chiqarilganda, har bir ulash butun ilovada ishga tushiriladi. Xuddi shunday Angular 2 da, har bir komponent ham tekshiriladi. Aniqrog'i o'zgarishlarni aniqlashni faqat bir voqea sodir bo'lganda o'rniga uning o'zgaruvchan xususiyatlaridan biri o'zgarib ketganligini anglatish salqin bo'ladimi? Biz burchakning ChangeDetectionStrategiyasi yordamida komponentlar darajasida foydalanishimiz mumkin.

OnPush faqatgina kirish xususiyatlariga e'tiborni qaratadi, barcha xususiyatlarni standart tekshiring.

2
qo'shib qo'ydi

Ushbu linkda chindan ham chiroyli va sodda tushuntirishni ko'rdim:

http://www.codecompiled.com/change-detection-in-angular -2/

ChangeDetectionStrategy.OnPush: it will update the view only in specific scenarios:
* When some event is fired.
* When value of input changes.

Default mean: Always update the view.

1
qo'shib qo'ydi
Yuqorida ko'rsatilgan narsani yuqorida har doim nima?
qo'shib qo'ydi muallif EpicPandaForce, manba

Ushbu linkda chindan ham chiroyli va sodda tushuntirishni ko'rdim:

http://www.codecompiled.com/change-detection-in-angular -2/

ChangeDetectionStrategy.OnPush: it will update the view only in specific scenarios:
* When some event is fired.
* When value of input changes.

Default mean: Always update the view.

1
qo'shib qo'ydi
Yuqorida ko'rsatilgan narsani yuqorida har doim nima?
qo'shib qo'ydi muallif EpicPandaForce, manba

Change detection is a feature provided by angular framework which is responsible for checking the changes happing in between the specified component with parent child relationship.

1. Change detection makes angular application more efficient you use it wisely.

2.It has two strategy onPush and Default.

3.OnPush Strategy gets executed when the specified object in component gets modified.Otherwise it remains as it's. That's why It makes efficient.

4.Default strategy makes application to work gets executed whenever it finds changes.

0
qo'shib qo'ydi
Angular Uzbekistan
Angular Uzbekistan
107 ishtirokchilar

Guruh Angular bo'yicha muloqot qilish uchun ochilgan Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs

ngTashkent
ngTashkent
77 ishtirokchilar

Правила просты: 1. Не хамить 2. Не хейтить 3. Реакт не нужен Ссылки: https://t.me/angular_ru - старший брат https://t.me/angular_uz - ангулар на узбекском @js_uzb @vuejs_uz @react_uz @nodejs_uz @yiiframework_uz @uzdevgroup @UzDev_Jobs @tasdev_talks