Angular Вход против Rx JS для 30+ компонентов

Question

Производительность моего приложения резко ухудшается, как только появляются данные для обработки (набор из 60+ объектов). Это безумие, потому что на самом деле мало что происходит.

У меня есть массив объектов, которые затем нужно фильтровать и отображать в виде календаря. На данный момент каждый «день» этого календаря является компонентом, который расширяет базовый «дневной» компонент, который, в свою очередь, подписывается на глобально удерживаемый субъект, содержащий вышеупомянутый массив объектов. Это означает, что в течение 5 недель в месячном просмотре у меня 35 подписок на одной странице (это не считая подписок для других частей пользовательского интерфейса). Я подозреваю, что количество подписок делает его менее отзывчивым к действиям пользователя.

Какой альтернативный подход может повысить производительность, если у меня есть один «источник истины», который нужно отфильтровать 35 раз на одной странице в зависимости от нескольких фильтров (например, режим, макет, дата)?

Я знаю, что @Input теоретически может помочь, но когда я попробовал, это показалось мне еще худшим вариантом. Есть идеи?

Answer 1

Попробуйте изменить Change Detection Strategy на OnPush, при этом angular будет проверять наличие изменений только при изменении значений переменных @Input, что сокращает обработку.

@Component({
  template: `...`,
  changeDetection: ChangeDetectionStrategy.OnPush
})

Вы можете получить больше информации об этой конфигурации здесь .