Можно ли использовать функцию Map.prototype.get() внутри выражения шаблона Angular?

Я знаю, что вы никогда не должны использовать вызовы функций в шаблонных выражениях Angulars, иначе они будут вызываться постоянно, и приложение будет сильно нагружено. (см. Medium — почему никогда не следует использовать вызовы функций в шаблонных выражениях Angular)

Я также знаю, что это нормально, когда используется []-массив-оператор. например

<div *ngIf="array[i]"></div>

Кто-нибудь знает, можно ли использовать функцию Map.prototype.get() внутри выражения шаблона, подобного этому?

<!-- the Map is structured like Map<Object, Object[]> -->
<ng-container *ngFor="let elem of someMap.get(keyToAnArray)">
    <app-some-compo [elem]="elem"></app-some-compo>
</ng-container>

angular ngfor angular-ng-if property-binding
person Marvin    schedule 31.10.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

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

Причина в том, что Angular компилирует шаблоны в исполняемые фрагменты кода, которые выполняются во время каждого цикла обнаружения изменений. И если вы уже некоторое время работали с Angular, вы должны заметить, сколько циклов обнаружения изменений выполняется в приложении.

Итак, взял ваш шаблон:

*ngFor="let elem of someMap.get(keyToAnArray)"

у нас будет что-то вроде:

фабрика компонентов

// part of change detection code starts here
...
i0.ɵɵproperty("ngForOf", ctx.someMap.get(ctx.keyToAnArray));
...

Главный вопрос, на который мы должны ответить: Насколько быстр метод Map.prototype.get()?

Из спецификации:

Объект карты должен быть реализован с использованием либо хеш-таблиц, либо других механизмов, которые в среднем обеспечивают время доступа, сублинейное по количеству элементов в коллекции.

Другими словами, мы можем думать о Map как о реализации структуры данных Hash Table. Это должно работать супер быстро. Но скорость выполнения метода get зависит от количества элементов в коллекции.

Чем больше у вас элементов, тем медленнее будет поиск. Но в случае структуры хеш-таблицы я думаю, что это просто микрооптимизация.

Вывод:

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

person yurzui    schedule 10.11.2020
comment
Большое спасибо за подробный ответ ???? - person Marvin; 11.11.2020