Frontender Libs - обзор библиотек JS / CSS

Оптимизация производительности в Angular

ChangeDetectionStrategy.OnPush работает по принципу, что изменения в компоненте должны происходить только в следующих случаях:

1. Изменение входного свойства (@Input).
2. Событие внутри компонента (например, клик по кнопке).
3. Использование асинхронного пайпа для подписки на Observable или Promise.

Для использования этой стратегии, в декораторе компонента нужно задать свойство changeDetection:

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

@Component({
  selector: 'app-user',
  template: `
    <div>
      <p>{{ user.name }}</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserComponent {
  @Input() user: { name: string };
}

В примере компонент UserComponent будет проверять изменения только тогда, когда свойство user изменяется. Это значит, что если родительский компонент обновляется, но свойство user остается неизменным, UserComponent не будет проходить процесс проверки изменений.

👉 @sWebDev

👍5

www.tgoop.com/sWebDev/3125

1.37K viewsSep 9, 2024 at 07:43

Оптимизация производительности в Angular

ChangeDetectionStrategy.OnPush работает по принципу, что изменения в компоненте должны происходить только в следующих случаях:

1. Изменение входного свойства (@Input).
2. Событие внутри компонента (например, клик по кнопке).
3. Использование асинхронного пайпа для подписки на Observable или Promise.

Для использования этой стратегии, в декораторе компонента нужно задать свойство changeDetection:

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

@Component({
  selector: 'app-user',
  template: `
    <div>
      <p>{{ user.name }}</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserComponent {
  @Input() user: { name: string };
}

BY Frontender Libs - обзор библиотек JS / CSS