УГЛОВОЙ
Google I/O 2023 — Начало работы с сигналами Angular
Angular 16 вводит реактивность через сигналы. Что такое реактивность?
Angular 16 вводит реактивность через сигналы. Давайте потратим немного времени, чтобы прояснить, что означает реактивность, прежде чем перейти к трем реактивным примитивам.
Что мы понимаем под реактивностью?
Реактивность — это декларативный способ выражения распространения изменений.
Пример электронной таблицы, предложенный на Google I/O, на самом деле довольно прост!
Посмотрите на изображение выше. "Если вы обновите фамилию Марка, вы ожидаете, что полное имя тоже изменится".
Именно так и происходит! Значение Полного имени получается из значения в первой ячейке и значения в последней ячейке.
Это то, что реактивность в Angular хочет сделать. Если переменная A зависит от других переменных, A будет обновлена, как только другие переменные изменятся. В следующем примере, учитывая текущее значение B и текущее значение C, A равно 1.
Другими словами, «реактивность позволяет платформе понимать распространение изменений посредством отслеживания зависимостей».
Детальное распространение изменений
Распространение изменений очень детальное, и оно блестит на более сложных примерах, где одна и та же переменная зависит от нескольких других переменных, даже если не напрямую.
В следующем примере значение A по-прежнему зависит от B и C. Однако C зависит от D. Когда значение D становится равным 4, срабатывает побочный эффект, уведомляющий о зависимых значениях (в данном случае только C).
Следовательно, C становится 4, а A становится 7.
Поскольку распространение изменения уведомляет только о зависимых значениях, а B и E не зависят от C или D, оба B и E не затрагиваются.
Обратите внимание: если вы посмотрите Переосмысление реактивности с угловыми сигналами, вы увидите, что стрелки идут в другую сторону. На видео стрелками показаны зависимости переменной. Стрелки указывают на: От какого значения я завишу?.
В отличие от видео, в этом посте стрелки показывают, как передаются данные и какие зависимости будут обновляться. Я нахожу этот способ мышления более близким к тому, как вы бы использовали BehaviorSubject в RxJS. Стрелки указывают на: Какое значение будет обновлено?.
Каковы три реактивных примитива?
Signal, Computed и Effect — это три реактивных примитива, представленные в качестве предварительной версии для разработчиков в Angular 16.
Сигналы
Сигнал — это значение, которое может сообщить Angular, когда оно изменится. Если вы знакомы с BehaviorSubject, вы можете думать о Сигналах как о BehaviorSubject без необходимости подписываться.
В приведенном выше примере электронной таблицы значение в первой ячейке и значение в последней ячейке являются сигналами.
first = signal("Mark");
last = signal("Rocket");
Рассчитано
Вычисляется новое значение, когда изменяется любой из сигналов, от которого он зависит. В следующем примере fullname вычисляется из значений сигналов first и last.
Вычисленное значение fullname будет автоматически обновляться всякий раз, когда изменяются сигналы first и last.
first = signal("Mark");
last = signal("Rocket");
fullname = computed(() => first() + " " + last());
Эффект
Побочная операция, которая считывает значение сигналов. Некоторые из причин, по которым вы можете захотеть использовать эффекты, упомянуты в видео и приведены ниже:
- запуск сетевых запросов
- выполнение действий рендеринга
- чтение или изменение DOM вручную
В следующем примере вы будете видеть изменения в консоли каждый раз, когда значение сигнала last изменяется.
first = signal("Mark");
last = signal("Rocket");
fullname = computed(() => first() + " " + last());
effect(() => console.log("Last name changed" + last()));
В этот момент они попадают в пример. Найдите пример и код здесь.
Подведение итогов
Вот список ключевых моментов, о которых следует помнить:
- Angular 16 хочет привнести реактивность повсюду. Это должно помочь уменьшить работу, которую Angular выполняет для поддержания DOM в актуальном состоянии.
- Обнаружение изменений запускается только тогда, когда сигнал изменился.
- Сигналы здесь, чтобы остаться. Они обратно совместимы, и команда Angular делает их совместимыми с решениями для управления состоянием, такими как NGRX и NGXS.
- Среди следующих шагов они упомянули полностью бесзональные приложения.
Найдите пример с использованием сигналов, вычислений и эффектов, а также методов сигналов.
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
