🟢 Мемоизация
Информация
В Angular чистые каналы очень эффективны, потому что значение запоминается, что означает, что если входное значение не изменяется, функция “преобразования” канала не вычисляется повторно, а выводится кэшированное значение.
Вы можете узнать больше о каналах в документации Angular и в этой статье о глубоком погружении в pipes.
В этом задании мы начнем с кнопки для загрузки списка людей. Каждый человек связан с числом, и мы будем использовать вычисление Фибоначчи для создания сложных вычислений, которые замедлят работу приложения.
Как только список будет загружен, попробуйте ввести несколько букв в поле ввода. Вы заметите, что приложение работает очень медленно, даже несмотря на то, что вы выполняете только самый простой набор текста.
Давайте воспользуемся Angular DevTool для профилирования нашего приложения и поймем, как этот инструмент может помочь нам понять, что происходит внутри нашего приложения.
Теперь запустите профилирование вашего приложения и введите несколько букв в поле ввода. Вы увидите несколько красных полос, отображающихся внутри панели профиля.
Если вы нажмете на одну из полос (обозначенную желтой стрелкой на рисунке ниже), вы увидите, что цикл обнаружения изменений в PersonListComponent
занимает более 3 секунд.
Пояснение
Цель этой задачи - понять, что является причиной такой задержки, и улучшить ее.
Подсказка:
Подсказка 1
Используйте Pipes
для запоминания вычисления Фибоначчи.