Узнайте, когда функции вызывают проблемы и как их решать с помощью каналов в Angular.
В предыдущей статье мы видели проблему производительности в Angular с помощью ngFor и способы ее решения с помощью функции trackBy. В этом руководстве мы увидим еще одну проблему с производительностью Angular при использовании functions. Это очень простая проблема. Но многие из нас этого не заметили. Я не обнаружил этой проблемы, когда был новичком в Angular.
Когда функция вызовет проблемы с производительностью?
Мы всегда создаем функции, чтобы облегчить нашу работу. Сами по себе функции не создают проблем с производительностью в Angular. Но если мы будем использовать функции из раздела HTML, то иногда это вызовет проблемы с производительностью. Давайте посмотрим на приведенный ниже код, чтобы лучше понять.
В приведенном выше коде getRank () - это функция. Функция getRank () не создает проблем с производительностью самостоятельно. Но если мы используем его внутри HTML, как указано выше, это вызовет проблемы.
Чтобы лучше понять это, я покажу демонстрацию проблемы с производительностью. Используйте приведенный ниже код в своем файле ts.
Используйте приведенный ниже код в своем файле HTML.
После сохранения просмотрите приложение с помощью команды serve.
- Вы можете увидеть вывод под названием, напечатанный 10 раз на вашей консоли. Фактически у нас всего 5 рядов. Но вызывается 10 раз. Это единственная проблема с грязной проверкой Angular. И это вызовет проблемы, если у вас будет больше строк. Вместо того, чтобы звонить 5 раз, он звонит 10 раз.
- Если вы нажмете кнопку Добавить продукт, рейтинг, называемый текстом, снова отобразится 10 раз на вашей консоли. Нет ничего связанного с событием нажатия кнопки с данными таблицы. А если вы посмотрите на функцию addProduct (), там нет кода. Однако функция getRank () вызывается 10 раз, даже если мы ее не вызываем и не используем. Это вызвано обнаружением грязных изменений в Angular.
Итак, если мы используем функцию внутри HTML, то функция вызывается для каждого действия, даже если мы не вызываем функцию. Это создаст проблемы с производительностью. Чтобы решить эту проблему, просто используйте концепцию канала в HTML вместо использования функции.
Используйте трубы:
Создайте трубу, используя команду ниже.
ng g pipe rank
Измените код канала ранга, как показано ниже.
Затем используйте конвейер ранга вместо функции getRank ().
Теперь названный ранг будет печататься только 5 раз. И если я нажму кнопку, то в Angular не будет грязной проверки. Проблема решается с помощью труб.
Заключение
В этом руководстве мы увидели, как функция может вызвать проблемы с производительностью в Angular и как это можно решить с помощью каналов. Когда мы изучаем новые технологии, мы должны уделять больше внимания решению подобных проблем. Все новые технологии должны иметь такого рода проблемы. Мы не можем решить все сразу. Однако, когда у нас есть устойчивое понимание этого, мы должны оптимизировать код, чтобы он работал лучше.
Спасибо за чтение. Надеюсь, вы нашли это полезным.
