Angular Signals: Нова ера реактивного управління станом - javascript.org.ua

Angular Signals: Нова ера реактивного керування станом

Для маніпулювання чутливістю та станом розробники Angular вже давно використовують операції RxJS. Хоча вони додають багато функціональності, це також вводить додаткові складнощі, такі як необхідність підписників, обсервабель та розуміння безлічі операторів. Ці недоліки вирішуються за допомогою Angular Signals, впроваджених у Angular 17, які забезпечують більш декларативний підхід до реактивності стану.

У цій статті ми обговоримо концепцію Signals, як взаємодія з ними змінить звичні процедури, порівняємо їх з традиційними та старими методами, такими як RxJS та @Input/@Output, і пояснимо, чому це величезний крок уперед для авторів Angular.

RxJS та традиційне керування станом в Angular:

1. RxJS: Двосічний меч

RxJS, основний елемент інструментів реактивного програмування в Angular, чудово справляється з асинхронними потоками. Це справді допомагає з управлінням асинхронними потоками, але це має свої недоліки:

Шаблонний код: Створення обсервабель, об'єднання потоків і створення обсервабель для простих випадків може бути надмірним.
Підписка на потоки: Невідключена підписка може призвести до втрати пам'яті.
Крива навчання: Оператори switchMap, mergeMap та інші операції RxJS можуть бути складними для багатьох початківців.

Приклад: Лічильник з RxJS

import { BehaviorSubject } from 'rxjs';  

const counter$ = new BehaviorSubject(0);  

// Підписка на зміни  
counter$.subscribe((value) => console.log(value));  

// Оновлення значення  
counter$.next(counter$.value + 1);

Хоча цей підхід функціонує, він є дещо складним для використання у простих випадках.

2. `@Input` і `@Output`: Основи

Для керування станом є інші механізми в фреймворках, такі як вбудовані @Input, для комунікації з батьківського до дочірнього компонента та @Output для передачі подій, однак:

Обмежений обсяг: Вони корисні лише при комунікації між компонентами.
Неефективність для складних станів: Для складних і спільних станів стає важко їх керувати.

Приклад: Лічильник з @Input/@Output

@Component({  
 selector: 'app-parent',  
 template: ``  
})  
export class ParentComponent {  
 count = 0;  

 onCountChange(newCount: number) {  
 this.count = newCount;  
 }  
}

@Component({  
 selector: 'app-counter',  
 template: `Збільшити`,  
})  
export class CounterComponent {  
 @Input() count = 0;  
 @Output() countChange = new EventEmitter();  

 increment() {  
 this.count++;  
 this.countChange.emit(this.count);  
 }  
}

Цей підхід працює, але стає громіздким навіть для помірно складних сценаріїв.

Революція Signals

З використанням Signals в Angular багато проблем, з якими стикаються розробники при використанні RxJS, @Input і @Output як однонаправлених моделей, були вирішені.

Ключові переваги Signals:

Без шаблонного коду: Signals має простий API, що потребує мінімальної конфігурації.
Автоматичне відслідковування залежностей: Signals автоматично перераховує залежні значення без необхідності підписки.
Тонко настроєні оновлення: Тільки ті частини DOM, які змінилися, переписуються, що дозволяє підвищити продуктивність.
Вбудоване керування життєвим циклом: Мінімізує ризик витоків пам'яті, оскільки signals працюють з життєвим циклом компонентів Angular.
5.
Легше налагодження: Signals спрощують відстеження оновлень стану без необхідності занурюватися у складні пайплайни RxJS.

Як працюють Signals

На високому рівні:

Значення змінного сигналу можна змінювати, і воно зберігається всередині нього.
Нові значення генеруються в обчисленому сигналі, який виходить з уже існуючих сигналів.
Ефекти дозволяють реагувати на зміни без необхідності вручну керувати підписками.

Приклад: Лічильник із Signals:

import { Component, signal, effect } from '@angular/core';  

@Component({  
 selector: 'app-counter',  
 template: `  

{{ counter() }}
Збільшити    `,  
})  
export class CounterComponent {  
 counter = signal(0); // Змінний сигнал   
 increment() {  
 this.counter.update((value) => value + 1);  
 }  

 constructor() {  
 effect(() => console.log(`Значення лічильника: ${this.counter()}`));  
 }  
}

Завдяки всього кільком рядкам коду:

Управління станом: counter — це значення, яке зберігається і може бути змінено певною дією.
Побічні ефекти: Коли сигнал змінюється, effect автоматично коригує значення.

Signals проти RxJS і @Input/@Output:

Порівняння Signals з RxJS і @Input/@Output

Чому Signals — це зміна гри

Зв'язок між компонентами: Signals дозволяють керувати станом, інтегруючи простоту @Input/@Output і ефективність RxJS.
Покращення продуктивності: Signals дозволяють використовувати тонко настроєні оновлення компонентів DOM, де оновлюються лише необхідні частини шаблону під час рендерингу.
Продуктивність для розробників: Signals допомагають як новачкам, так і досвідченим розробникам, зменшуючи час, витрачений на розуміння концепцій, і скорочуючи кількість шаблонного коду.

Коли використовувати Signals замість RxJS

Випадок використання: Рекомендований підхід:

Висновок

З Signals Angular робить великий крок уперед у тому, як розробники будуть керувати станом в Angular-додатках у майбутньому. Це зменшує кількість шаблонного коду в RxJS і труднощі з @Input/@Output, роблячи реактивне програмування простішим і з кращою продуктивністю.

Ті, хто хоче створювати Angular-додатки, що є елегантними, з високою продуктивністю і легкими для підтримки, не повинні шукати далі, оскільки Signals — це все, що їм потрібно. Чи то для простого лічильника, чи складного корпоративного додатку, управління станом за допомогою Signals — це безстресова і приємна робота.

Хочеш покращити свою продуктивність у Angular? Спробуй Signals вже сьогодні!

Перекладено з: Angular Signals: A New Era of Reactive State Management