Как я могу оптимизировать эту проблему с производительностью геттера?
В угловом компоненте, использующем хранилище NgRX, у меня есть этот шаблон
<p>{{ someObservable | async | assertNotNull }}</p>
Который исходит от следующего геттера
get someObservable(): Observable<number> {
return this.store.pipe(select(state => state.myObservableValue));
}
Проблема в том, что он возвращает новый Observable при каждом цикле обнаружения изменений, а асинхронный канал каждый раз отписывается/подписывается.
Как я могу улучшить это элегантным и совместимым с производительностью способом?
Ответы 1
Сделать это обычным свойством только для чтения
public readonly someObservable: Observable<number> = this.store.pipe(select(state => state.myObservableValue));
Его значение было присвоено только один раз во время инициализации объекта, и при каждом доступе нет вызова геттера.
Но будет ли его значение обновляться всякий раз, когда изменяется значение состояния?
Да, это то, что select делает. каждый раз, когда this.store излучает что-то, он возвращает соответствующую форму state.myObservableValue. Вы должны попробовать это, чтобы увидеть, как это работает.
Спасибо, не могли бы вы дать мне еще несколько объяснений о том, как свойства только для чтения сохраняют производительность в отношении циклов обнаружения изменений, пожалуйста?