Пришло время углубиться в текущую концепцию реактивности в Angular и представить новый реактивный примитив, а именно сигналы. Когда люди говорят о реактивности, в основном на ум приходят две темы: «RxJS» и «Zone.js». За последние пару лет сообщество сильно разделилось по поводу использования RxJS. Одна половина хотела бы лучшей интеграции с Angular, тогда как другая половина была бы довольна текущим состоянием.
В следующих разделах я расскажу вам, почему Angular выбирает этот примитив и какие планы на будущие версии.
Почему?
С момента появления Angular использование RxJS в Angular было очень спорной темой. Еще в декабре 2015 года предложение использовать Observables для ввода (https://github.com/angular/angular/issues/5689) разделило сообщество. К неудовольствию части сообщества, команда Angular решила больше не интегрировать RxJS.
Что сообщество потребовало от команды Angular для реализации?
Во-первых, лучший опыт разработчика, когда дело доходит до использования RxJS, а во-вторых, детальное обнаружение изменений.
Однако со временем команда Angular провела небольшое исследование того, как удовлетворить эти требования, и наткнулась на Signals.
Почему именно Сигналы?
В отличие от RxJS, сигналы синхронны и имеют некоторые преимущества:
· Глюков нет (элегантно решают алмазную проблему)
· Нет необходимости программно закрывать подписку (автоматическая подписка и отписка)
· А они очень простые
Проблема с бриллиантами?
Одной из наиболее распространенных проблем с реактивными алгоритмами является проблема алмаза. Поскольку входные данные не синхронные, а асинхронные, D может оцениваться дважды, потому что C изменяется. Это приведет к появлению значений D’ и D вскоре после другого, что называется сбоем.
Почему нет необходимости подписываться и отписываться?
Существует реактивный примитив под названием effect, который автоматически обрабатывает подписки.
Что?
Сигналы — это реактивные примитивы, которые позволяют синхронно отслеживать свое состояние. Таким образом, Сигналы не заменяют RxJS, а решают некоторые проблемы, возникающие при использовании RxJS.
Сигнал имеет сеттер-метод, который изменяет текущее значение. Потребитель, с другой стороны, может только прочитать это значение и будет уведомлен о любых изменениях.
Как это работает?
Существует три реактивных примитива: сигнал, вычисленный и эффект. Сигнал представляет собой структуру данных, которая содержит некоторое значение. При использовании вычисляемых сигналов их можно комбинировать. Чтобы получать уведомления об изменении сигналов, можно использовать эффект.
Как?
Сигналы можно использовать
· в компонентах
· услуги
· или в реализации магазина
Как это влияет на рендеринг в Angular?
В Angular все приложение отображается как дерево компонентов. Таким образом, если какой-либо компонент изменится, все дерево будет проверено сверху вниз, и все затронутые компоненты будут перерисованы.
Как это работает?
На рисунке ниже желтый компонент изменяется, что приводит к тому, что родительские компоненты помечаются как грязные. Затем запускается Zone.js и инициируется изменение (TICK). Мгновенно каждый компонент в дереве компонентов, помеченный как грязный, будет повторно визуализирован. К сожалению, под этот принцип подпадают даже компоненты, которые не претерпели изменений.
Сигналы, с другой стороны, не запускают обнаружение изменений. Они позволяют вносить мелкие изменения, что делает использование Zone.js излишним.
В будущем мелкие изменения можно будет настраивать с помощью флага в компоненте-декораторе, так что в итоге будет повторно визуализирована только та часть компонента, которая использует сигнал.
