Лучший способ использовать обнаружение изменений OnPush

Question

Каков наилучший способ использовать OnPush обнаружение изменений, чтобы обеспечить гибкость в изменениях, а также довольно простую в тестировании?Просматривая различные учебные пособия, я нашел подход к использованию OnPush:

1. Во-первых, это использование наблюдаемого объекта из сервиса непосредственно в представлении. Я не уверен, что этот подход действителен.https://blog.angular -university.io / onpush-изменения-обнаружения-как это работает / .
2. Другой вариант - использовать immutable.js, но в этом случае я неЯ знаю, если это достаточно гибко для создания объектов, я знаю, что это проще в случае списка.

Может быть, вы знаете другой подход, чем тот, который я перечислил?

Answer 1

1. Использование Observables с async pipe - вполне допустимая опция, которую я использую довольно часто.Angular может проверять, когда Observable испускает значение, и помечает ваш компонент для обнаружения изменений.
2. Immutable.js также является допустимым вариантом, однако я лично считаю его слишком многословным.В моем текущем проекте я предпочитаю использовать оператор ES6 .Например, чтобы обновить свойство, используйте const newObj = {...obj, prop: newValue}, чтобы вставить элемент в массив const newArray = [...array, newItem].Однако вы должны убедиться, что вся команда использует этот подход, поскольку нет способа обеспечить неизменность, как в случае с Immutable.js.

Моя команда использует шаблон page - component.Например, нам нужно создать функцию для обновления пользовательских данных.В этом случае я бы создал user-page.component и user-form.component. user-page.component - контейнер для user-form.component .

user-form.component имеет ChangeDetectionStrategy.OnPush, и он не взаимодействует со службами, он просто имеет ряд входных свойств (скажем, @Input user: User) и генерирует события @Output (например, @Output update = new EventEmitter<User>()).Это компонент dumb , который просто обновляет форму и генерирует события.

user-page.component - это тот, кто взаимодействует со службами, устанавливает входные свойства и прослушивает user-form.component события.Его разметка шаблона обычно содержит только дочерние компоненты:

<app-user-form [user]="user$ | async" (update)="onUpdate($event)"></app-user-form>

user $ - это Observable, который поступает из сервиса или магазина и передается в user-form.component через асинхронный канал. onUpdate - это функция, которая вызывается, когда пользователь нажимает кнопку Обновить на user-form.component , и вызывает службу API для обновления сведений о пользователе.

Следование этой схеме дает разделение компонентов, которые взаимодействуют со службами, и компонентов, которые только отображают данные, что позволяет вам контролировать обнаружение изменений.Кстати, Официальный пример приложения NGRX использует тот же подход.