Знакомство с сигналами: новый примитив Angular для реактивности

15 февраля 2023 года команда Angular внедрила Signals в фреймворк с помощью простого запроса на включение. С тех пор в сообществе Angular велись острые дискуссии о его использовании и преимуществах. Многие даже начали создавать прототипы с сигналами, чтобы опробовать его функциональность.

Давайте посмотрим, как работает эта новая функция, ее синтаксис и как ее использовать после ее полного развертывания.

Что такое сигналы?

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

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

Как использовать сигналы в Angular

Сигнал будет выглядеть примерно так:

@Компонент({
 селектор: 'мое приложение',
 автономный: истинный,
 шаблон: `
 Подсчет: {{ подсчет() }} </div>
 Двойной: {{ двойной() }} </div>
"Счетчик изменений()"></button>
`,
})
экспортсорт Компонент приложения{
 количество = сигнал (0)
 двойной = вычисляется (() =>этот.считать() * 2);

 изменитьСчетчик () {
этот.счет.набор(5)
 }
}

В этом компоненте приложения переменная count представляет собой сигнал, инициализированный нулевым значением. Затем на count ссылаются внутри double (вычисляемое значение) и шаблон. Таким образом, когда нажатие кнопки устанавливает значение count равным пяти, обновляются как вычисленное значение (двойное), так и значения в шаблоне.

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

Почему введение сигналов важно

Сигналы облегчают изучение и работу с Angular. Переход на сигналы как на новый способ обучения и создания с помощью Angular по умолчанию гармонизирует процесс обучения. Предпочитаем ли мы более императивный стиль кодирования с помощью Angular или хотим изучить более декларативный стиль кодирования.

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

Сигналы объединят эти два отдельных подхода. Каждый может изучить сигналы по умолчанию, начать изучать концепции, лежащие в основе реактивности, и даже не беспокоиться о включении Angular RX.js если не могут или не хотят.

Как только вы освоитесь с основы ангуляра и хотите переключиться на более декларативный стиль кодирования, вы можете легко добавить RX.js к концепциям, которые вы уже понимаете.

Сигналы должны улучшить программирование на Angular для всех

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

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