Comments 5
В свое время тоже увлекался подобным подходом и даже написал библиотеку, используя которую можно вообще выключить Change-Detection (описание можно почитать тут Angular Components with Extracted Immutable State).
Применяя декоратор @Pure, надо внимательно следить за тем, чтобы декорируемый метод все данные брал из аргументов и случайно не обращался к this напрямую.
Возможно, что более безопасно в этом смысле было бы вынести такой метод во внешнюю функцию.
const filter = memoize((items: string[], value: string) =>
items.filter(item => item.toLowerCase().includes(value.toLowerCase()));
)
class MyComponent {
get filteredItems(): string[] {
return filter(this.items, this.value);
}
}Правда, код становится менее красивым.
Или как вариант — написать правило для eslint, которое будет проверять это постфактум
Сначала я специально так сделал, чтобы кто-то случайно не повесил декоратор на "грязную" функцию и не получил неожиданный результат. Но потом я понял, что часто из this берутся какие-нибудь сервисы или константы, прилетевшие из DI, которые не меняются. Так что просто добавил .apply(this, args). Кроме того, вариант этого декоратора из @taiga-ui/cdk ещё можно вешать на геттеры для реализации паттерна отложенных вычислений. Вот его исходный код, ставьте из npm и пользуйтесь на здоровье :)
https://github.com/TinkoffCreditSystems/taiga-ui/blob/main/projects/cdk/decorators/pure.ts
Я уже не представляю, как на Ангуляре без него что-то писать, очень часто пригождается.
Есть еще более хорошая реализация подобной фичи: memorize-decorator, он более универсальный
Декларативный подход в Angular