Angular Signals🚦: новая стратегия обнаружения изменений

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

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

Обнаружение изменений: каково текущее состояние и каким будет будущее?

Angular в настоящее время полагается на Zone js для обнаружения изменений. Zone Js будет обновлять различные встроенные API, чтобы уведомлять об изменениях в приложении. Если в JavaScript вводится новый веб-API, то Zone J необходимо обновить путем исправления нового API, поэтому полагаться на Zone J не является перспективным решением.

Еще одним серьезным недостатком этого подхода является отсутствие информации о компоненте, ответственном за изменение, и о том, что изменилось в модели. В связи с этим, чтобы отразить изменения модели в DOM, приложению приходится перемещаться сверху вниз, чтобы выявить и применить изменения. Однако обход компонента можно настроить с помощью стратегии обнаружения OnPush change.

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

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

Сигналы приносят Angular следующие преимущества.

• Обновляет только те компоненты, которые интересуют изменение значения модели, предоставляя информацию об изменении модели.
• Удаляет обход компонентов сверху вниз. Он обновляет только тот компонент, который использует сигнал.
• Никаких грязных исправлений глобальных методов/API.

Строительные блоки углового сигнала

Приведенные ниже элементы являются основными строительными блоками сигнала Angular.

1. Сигнал
2. Вычисленный сигнал
3. Эффект

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

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

Вы можете инициализировать значение сигнала, используя метод signal.

export class AppComponent {
  count = signal(0);
}

Метод set можно использовать для изменения значения инициализации сигнала. Значение сигнала изменяется на новое значение в методе resetView.

export class AppComponent {
  
  count = signal(0);

  resetView() {
    this.count.set(0);
  }
}

Метод update поможет вам изменить значение на основе предыдущего значения.

export class AppComponent {
  count = signal(0);

  addView() {
    this.count.update(val => val + 1);
  }

  resetView() {
    this.count.set(0);
  }
}

mutateМетод позволит вам мутировать сигнал на его месте и уведомлять о его зависимостях.

Использование сигналов в шаблонах

Вычисленные свойства сигнала

Другая интересная часть сигнала — это вычисленные свойства сигнала. Вычисляемый сигнал — это давно востребованная функция в Angular, и ее представление как части сигнала имеет серьезные преимущества как для опыта разработчиков, так и для производительности приложения.

Функцию computed можно использовать для создания вычисляемого свойства сигнала.

export class AppComponent {
  
  count = signal(0);

  revenue = computed(() => this.count() * 0.5);

  addView() {
    this.count.update(val => val + 1);
  }

  resetView() {
    this.count.set(0);
  }
}

Вычисленное свойство сигнала имеет следующее поведение.

1. Вычисляемые свойства лениво инициализируются. Вычисление не произойдет, пока не будет получено значение.
2. Он динамически перемешивает график зависимостей в зависимости от изменения сигнала зависимости. Angular проявляет осторожность в отношении динамического графа зависимостей, поскольку частая настройка графа зависимостей будет стоить дорого.

Эффект

Функция effect позволяет вам прослушивать изменения сигнала и действовать на их основе. Эффекты можно использовать для обработки некоторых случаев использования, например:

1. Пользовательское обновление DOM после изменения одного или нескольких сигналов.
2. Запуск сетевых запросов.

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

export class AppComponent {
  count = signal(0);
  user = signal(0);

  constructor() {
      effect(() => {
        console.log('Empty effect method');
      });
  
      effect(() => {
        console.log('User effect invoked ' + this.user());
      });
  
      effect(() => {
        console.log('User and View effect invoked ' + this.user() + ' ' + this.count());
      });
  
      effect(() => {
        console.log('Count effect invoked ' + untracked(this.count));
      });
  }

  addView() {
    this.count.update(val => val + 1);
  }

  userChange() {
    this.user.update(val => val + 1);
  }

  resetView() {
    this.count.set(0);
  }
}

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

effect(() => {
  console.log('Empty effect method');
});

Приведенный ниже эффект будет вызываться при каждом изменении сигнала user.

effect(() => {
  console.log('User effect invoked ' + this.user());
});

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

effect(() => {
  console.log('User and View effect invoked ' 
               + this.user() + ' ' + this.count());
});

Этот метод эффекта будет вызываться, когда в первый раз будет установлен сигнал счета, тогда он станет инертным, поскольку count обернут в метод untracked. Этот метод поможет вам выполнить сигналы внутри нереактивного контекста.

effect(() => {
  console.log('Count effect invoked ' + untracked(this.count));
});

Использование сигналов в шаблонах

Команда angular выбирает подход с функцией получения для использования сигналов внутри шаблонов.

<div>
  <span>Unique users: </span>
  <span>{{users()}}</span>
</div>

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

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

Предстоящие работы — сигналы

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

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

Приятного кодирования…

Рекомендации