Представяне на сигнали: новият примитив на Angular за реактивност

На 15 февруари 2023 г. екипът на Angular представи Signals в рамката с проста заявка за изтегляне. Оттогава има оживени дискусии в общността на Angular относно използването и предимствата му. Много дори са започнали да създават прототипи със сигнали, за да изпробват неговата функционалност.

Нека да разгледаме как работи тази нова функция, нейния синтаксис и как да я използвате, след като бъде напълно пусната.

Какво представляват сигналите?

Типът сигнал е новият реактивен примитивен тип на Angular. Целта му е да съхранява стойност, точно като стандартна променлива, но отличителната черта на сигнала е неговото уникално поведение. Ако сигналът се промени, той ще уведоми всичко, което зависи от него.

Освен това Angular може да използва сигнали като нов подход за откриване и задействане на промяна, вместо текущия подход по подразбиране на мръсна проверка на цялото дърво на компонентите.

Как да използвате сигнали в Angular

Сигналът ще изглежда така:

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

 changeCount() {
това.count.set(5)
 }
}

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

Всяка част от Ъглова компонента което зависи от сигнала, ще се актуализира автоматично, след като стойността се промени.

Защо е важно въвеждането на сигнали

Signals улесняват изучаването и работата с Angular. Преминаването към сигнали като нов начин по подразбиране за учене и изграждане с Angular ще хармонизира учебния процес. Независимо дали предпочитаме по-наложителен стил на кодиране с Angular или искаме да научим по-декларативен стил на кодиране.

Повечето хора започват да кодират наложително, защото обикновено е по-интуитивно и познато на хората. Но преминаването от императивния подход към декларативния начин включва промяна на парадигмата и тотална промяна в нашия мисловен модел. Ето защо RX.js, реактивната библиотека, е трудна за научаване за мнозина.

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

След като се чувствате удобно с основите на Angular и искате да преминете към по-декларативен стил на кодиране, можете лесно да добавите RX.js към концепциите, които вече разбирате.

Сигналите трябва да подобрят ъгловото програмиране за всички

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

Angular ще разчита на сигнали, за да направи откриването на промени по-леко и стабилно. Следователно, като разработчик на Angular, научаването да използвате сигнали ще ви даде по-добро разбиране на реактивността в Angular и ще ви направи по-добър разработчик. Не забравяйте да овладеете основите на Angular, преди да научите по-сложните части.