15_响应式编程核心：Signals 与异步管理

响应式编程核心：Signals与异步管理

Angular v16引入的Signals标志着框架响应式编程范式的重大演进。作为一种新的状态管理原语，Signals提供了更直观、更高效的方式来管理应用状态和处理异步数据，解决了传统RxJS Observable在某些场景下的复杂性问题。本章将全面解析Signals全家桶API，深入探讨异步数据处理策略，并通过实战案例展示基于Signals的状态管理方案。

1 Signals全家桶API：响应式状态的基石

Signals是一种包含值的特殊对象，当值发生变化时会自动通知其依赖者。这种自动追踪依赖的特性，让状态管理变得更加简单直观，同时保持了高效的更新机制。

1.1 基础操作：创建与更新信号

信号的创建与读取

signal()函数用于创建一个可写信号，初始值通过参数指定。读取信号值时需调用信号（signal()），这一设计确保了依赖追踪的准确性：

import { signal } from '@angular/core';

// 创建信号
const count = signal(0);
const user = signal({ name: '张三', age: 30 });
const isLoading = signal(false);

// 读取信号值（必须调用信号）
console.log(count()); // 输出: 0
console.log(user().name); // 输出: "张三"

注意：信号值的读取是一个主动操作（需调用()），这与普通变量不同，确保了Angular能准确追踪信号的依赖关系。

信号的更新方法

Signals提供了三种更新值的方法，适用于不同场景：

set()：直接设置新值
适用于完全替换信号值的场景：

// 基本类型更新
count.set(1);

// 对象类型更新（完全替换）
user.set({ name: '李四', age: 25 });

update()：基于当前值计算新值
接收一个函数，以当前值为参数，返回新值，适用于需要基于旧值计算新值的场景：

// 基本类型更新
count.update(current => current + 1); // 自增1

// 对象类型更新
user.update(current => ({ ...current, age: current.age + 1 })); // 年龄自增

mutate()：直接修改当前值
接收一个函数，直接修改当前值（仅适用于对象或数组），避免创建新对象，适用于大型复杂对象的局部更新：

// 直接修改对象属性（无需创建新对象）
user.mutate(current => {
  current.age = 31; // 直接修改属性
});

// 操作数组
const items = signal(['a', 'b', 'c']);
items.mutate(current => {
  current.push('d'); // 直接修改数组
  current[0] = 'A';
});

更新方法对比：

方法	适用场景	优点	注意事项
`set()`	完全替换值	简单直接	对于对象类型会创建新引用
`update()`	基于旧值计算新值	纯函数方式，无副作用	对于复杂对象可能产生性能开销
`mutate()`	大型对象/数组的局部修改	性能好，避免创建新对象	破坏不可变性，仅建议内部使用

1.2 高级能力：计算信号与副作用

计算信号（`computed()`）

computed()用于创建基于其他信号的衍生信号，当依赖的信号发生变化时，计算信号会自动更新：

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

// 基础信号
const firstName = signal('张');
const lastName = signal('三');
const price = signal(100);
const quantity = signal(5);

// 计算信号：拼接姓名
const fullName = computed(() => `${firstName()} ${lastName()}`);

// 计算信号：计算总价
const totalPrice = computed(() => {
  console.log('计算总价'); // 仅在price或quantity变化时执行
  return price() * quantity();
});

// 使用计算信号
console.log(fullName()); // 输出: "张 三"
console.log(totalPrice()); // 输出: 500

// 更新依赖信号，计算信号自动更新
price.set(120);
console.log(totalPrice()); // 输出: 600（自动重新计算）

计算信号的特性：

惰性计算：仅在首次读取或依赖信号变化后首次读取时计算
缓存机制：依赖未变化时返回缓存值，避免重复计算
只读性：计算信号无法直接修改，只能通过更新其依赖的信号间接修改

副作用（`effect()`）

effect()用于创建响应信号变化的副作用（如日志记录、DOM操作等），当依赖的信号变化时自动执行：

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

const count = signal(0);

// 创建副作用
const stopEffect = effect(() => {
  console.log(`Count changed to: ${count()}`);
  // 可以执行DOM操作、日志记录等副作用
});

// 触发副作用
count.set(1); // 输出: "Count changed to: 1"
count.update(c => c + 1); // 输出: "Count changed to: 2"

// 停止副作用（可选）
stopEffect();
count.set(3); // 无输出（副作用已停止）

副作用的高级配置：

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

// 配置副作用
effect(() => {
  console.log(`User: ${user().name}`);
}, {
  injector: myInjector, // 指定注入器
  manualCleanup: true, // 需要手动清理
  allowSignalWrites: false // 是否允许在副作用中修改信号（默认false）
});

最佳实践：避免在effect()中修改信号，除非明确设置allowSignalWrites: true，否则会导致无限循环或不可预期的行为。

关联信号（`linkedSignal()`）

Angular v17+引入的linkedSignal()用于创建与现有信号同步的信号，适用于需要在不同上下文间共享信号的场景：

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

// 原始信号
const original = signal(10);

// 创建关联信号
const linked = linkedSignal(original);

console.log(linked()); // 输出: 10

// 更新原始信号，关联信号同步变化
original.set(20);
console.log(linked()); // 输出: 20

// 更新关联信号，原始信号同步变化
linked.set(30);
console.log(original()); // 输出: 30

linkedSignal()与普通信号的区别在于它不存储值，而是与源信号保持双向同步，适用于组件间共享状态但不希望直接暴露原始信号的场景。

2 异步数据处理：从Observable到Signals

在Angular中，异步数据（如HTTP请求）传统上使用RxJS Observable处理。Signals提供了与Observable的无缝集成，同时解决了订阅管理的复杂性问题。

2.1 Observable转Signal：`toSignal()`

toSignal()将Observable转换为Signal，自动管理订阅生命周期，简化异步数据处理：

import { Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

interface User {
  id: number;
  name: string;
}

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [],
  template: `
    @if (users(); as users) {
      <ul>
        @for (user of users; track user.id) {
          <li>{{ user.name }}</li>
        }
      </ul>
    } @else if (users.loading) {
      <p>加载中...</p>
    } @else if (users.error) {
      <p>错误: {{ users.error.message }}</p>
    }
  `
})
export class UserComponent {
  private http = inject(HttpClient);
  
  // 获取用户列表的Observable
  private users$: Observable<User[]> = this.http.get<User[]>('/api/users');
  
  // 转换为Signal（带加载和错误状态）
  users = toSignal(this.users$, {
    initialValue: undefined, // 初始值
    manualCleanup: false // 自动清理订阅
  });
}

toSignal()的关键特性：

自动订阅/取消订阅：组件销毁时自动取消订阅，避免内存泄漏
状态包装：返回的信号包含loading和error状态，简化异步UI处理
初始值：通过initialValue指定初始状态，避免undefined检查

2.2 资源API：自动管理异步操作

Angular v17+引入的资源API（toObservable()和withCancel）提供了更强大的异步操作管理能力，特别是自动取消未完成的请求：

import { Component, inject, ResourceLoader } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { toSignal, toObservable } from '@angular/core/rxjs-interop';
import { switchMap, withCancel } from 'rxjs/operators';

@Component({
  selector: 'app-product-search',
  standalone: true,
  template: `
    <input type="text" [(ngModel)]="searchQuery" placeholder="搜索产品">
    
    @if (products(); as products) {
      <ul>
        @for (product of products; track product.id) {
          <li>{{ product.name }}</li>
        }
      </ul>
    } @else if (products.loading) {
      <p>搜索中...</p>
    }
  `
})
export class ProductSearchComponent {
  private http = inject(HttpClient);
  private loader = inject(ResourceLoader);
  
  // 搜索关键词信号
  searchQuery = signal('');
  
  // 将信号转换为Observable，用于触发搜索
  searchQuery$ = toObservable(this.searchQuery);
  
  // 产品搜索信号（自动取消未完成请求）
  products = toSignal(
    this.searchQuery$.pipe(
      // 当搜索关键词变化时，自动取消上一次请求
      switchMap(query => this.http.get(`/api/products?query=${query}`).pipe(
        withCancel(this.loader.cancel) // 关联资源加载器的取消信号
      ))
    ),
    { initialValue: [] }
  );
}

资源API的核心优势：

自动取消：当组件销毁或新请求发出时，自动取消未完成的请求
与Signals无缝集成：结合toObservable()和toSignal()实现完整的响应式流程
减少样板代码：无需手动管理Subscription或takeUntil

2.3 异步信号的组合与依赖

多个异步信号可以组合使用，形成复杂的依赖关系，且自动处理加载状态：

import { computed, signal, toSignal } from '@angular/core';
import { HttpClient } from '@angular/common/http';

// 获取用户详情
const userId = signal(1);
const user$ = userId.pipe(
  switchMap(id => http.get(`/api/users/${id}`))
);
const user = toSignal(user$, { initialValue: null });

// 获取用户订单（依赖用户ID）
const orders$ = userId.pipe(
  switchMap(id => http.get(`/api/users/${id}/orders`))
);
const orders = toSignal(orders$, { initialValue: [] });

// 计算信号：用户是否有未完成订单
const hasPendingOrders = computed(() => {
  // 依赖orders信号，自动处理异步状态
  return orders().some(order => order.status === 'pending');
});

// 切换用户，自动更新所有依赖信号
userId.set(2); // 触发user和orders重新请求

3 状态管理实战：基于Signals的购物车

下面通过一个完整的购物车案例，展示如何使用Signals管理应用状态，包括状态设计、更新逻辑和响应式UI集成。

3.1 购物车状态设计与服务实现

首先设计购物车状态结构，并创建服务封装状态操作：

// cart.service.ts
import { Injectable, signal, computed } from '@angular/core';

// 商品类型定义
export interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
  imageUrl: string;
}

@Injectable({ providedIn: 'root' })
export class CartService {
  // 私有信号：存储购物车数据
  private cartItems = signal<CartItem[]>([]);
  
  // 公共计算信号：暴露购物车状态（只读）
  cartItems$ = computed(() => this.cartItems());
  
  // 计算信号：购物车商品总数
  itemCount = computed(() => 
    this.cartItems().reduce((total, item) => total + item.quantity, 0)
  );
  
  // 计算信号：购物车总金额
  totalAmount = computed(() => 
    this.cartItems().reduce((total, item) => total + (item.price * item.quantity), 0)
  );
  
  // 计算信号：是否为空
  isEmpty = computed(() => this.cartItems().length === 0);
  
  // 添加商品到购物车
  addItem(item: Omit<CartItem, 'quantity'>, quantity: number = 1) {
    this.cartItems.update(items => {
      // 检查商品是否已在购物车中
      const existingItem = items.find(i => i.id === item.id);
      
      if (existingItem) {
        // 已存在：更新数量
        return items.map(i => 
          i.id === item.id 
            ? { ...i, quantity: i.quantity + quantity } 
            : i
        );
      } else {
        // 不存在：添加新商品
        return [...items, { ...item, quantity }];
      }
    });
  }
  
  // 更新商品数量
  updateQuantity(itemId: number, quantity: number) {
    if (quantity < 1) {
      this.removeItem(itemId);
      return;
    }
    
    this.cartItems.update(items => 
      items.map(item => 
        item.id === itemId ? { ...item, quantity } : item
      )
    );
  }
  
  // 移除商品
  removeItem(itemId: number) {
    this.cartItems.update(items => 
      items.filter(item => item.id !== itemId)
    );
  }
  
  // 清空购物车
  clearCart() {
    this.cartItems.set([]);
  }
}

3.2 组件集成与响应式UI

1. 商品列表组件（添加商品到购物车）

// product-list.component.ts
import { Component, inject } from '@angular/core';
import { CartService } from './cart.service';
import { CommonModule } from '@angular/common';

// 商品数据
const products = [
  { id: 1, name: '笔记本电脑', price: 5999, imageUrl: '/images/laptop.jpg' },
  { id: 2, name: '无线鼠标', price: 129, imageUrl: '/images/mouse.jpg' },
  { id: 3, name: '机械键盘', price: 399, imageUrl: '/images/keyboard.jpg' }
];

@Component({
  selector: 'app-product-list',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h2>商品列表</h2>
    <div class="product-grid">
      @for (product of products; track product.id) {
        <div class="product-card">
          <img [src]="product.imageUrl" [alt]="product.name">
          <h3>{{ product.name }}</h3>
          <p>¥{{ product.price }}</p>
          <button (click)="addToCart(product)">加入购物车</button>
        </div>
      }
    </div>
  `,
  styles: [`
    .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
    .product-card { border: 1px solid #eee; padding: 1rem; text-align: center; }
    .product-card img { max-width: 100%; height: 150px; object-fit: contain; }
  `]
})
export class ProductListComponent {
  private cartService = inject(CartService);
  products = products;
  
  addToCart(product: any) {
    this.cartService.addItem(product);
  }
}

2. 购物车组件（展示与管理购物车）

// cart.component.ts
import { Component, inject } from '@angular/core';
import { CartService } from './cart.service';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-cart',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <h2>购物车</h2>
    
    @if (cartService.isEmpty()) {
      <p>购物车是空的，快去添加商品吧！</p>
    } @else {
      <table>
        <thead>
          <tr>
            <th>商品</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          @for (item of cartService.cartItems$(); track item.id) {
            <tr>
              <td>
                <img [src]="item.imageUrl" [alt]="item.name" width="50">
                {{ item.name }}
              </td>
              <td>¥{{ item.price }}</td>
              <td>
                <input 
                  type="number" 
                  [(ngModel)]="item.quantity" 
                  min="1"
                  (change)="cartService.updateQuantity(item.id, item.quantity)"
                >
              </td>
              <td>¥{{ item.price * item.quantity }}</td>
              <td>
                <button (click)="cartService.removeItem(item.id)">删除</button>
              </td>
            </tr>
          }
        </tbody>
      </table>
      
      <div class="cart-summary">
        <p>商品总数：{{ cartService.itemCount() }}</p>
        <p>总计：¥{{ cartService.totalAmount() }}</p>
        <button (click)="cartService.clearCart()">清空购物车</button>
        <button class="checkout">结算</button>
      </div>
    }
  `,
  styles: [`
    table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
    th, td { border: 1px solid #eee; padding: 0.5rem; text-align: left; }
    .cart-summary { text-align: right; margin: 1rem 0; }
    .checkout { background: #007bff; color: white; border: none; padding: 0.5rem 1rem; margin-left: 1rem; }
  `]
})
export class CartComponent {
  cartService = inject(CartService);
}

3. 导航栏组件（展示购物车数量）

// navbar.component.ts
import { Component, inject } from '@angular/core';
import { CartService } from './cart.service';

@Component({
  selector: 'app-navbar',
  standalone: true,
  template: `
    <nav>
      <a href="/">首页</a>
      <a href="/products">商品</a>
      <a href="/cart" class="cart-icon">
        购物车
        @if (cartService.itemCount() > 0) {
          <span class="badge">{{ cartService.itemCount() }}</span>
        }
      </a>
    </nav>
  `,
  styles: [`
    nav { display: flex; gap: 1rem; padding: 1rem; background: #f5f5f5; }
    .cart-icon { position: relative; }
    .badge { 
      position: absolute; 
      top: -8px; 
      right: -8px; 
      background: red; 
      color: white; 
      border-radius: 50%; 
      width: 16px; 
      height: 16px; 
      font-size: 12px; 
      text-align: center;
    }
  `]
})
export class NavbarComponent {
  cartService = inject(CartService);
}

3.3 状态管理模式分析

本案例采用的基于Signals的状态管理模式具有以下特点：

单一数据源：购物车状态集中在CartService中，避免状态分散
读写分离：内部使用可写信号（cartItems），外部暴露只读计算信号（cartItems$、itemCount等）
响应式更新：所有依赖状态的UI自动响应变化，无需手动触发更新
封装业务逻辑：所有状态更新逻辑（添加、删除、更新数量）封装在服务中，确保状态一致性
零订阅管理：组件无需手动订阅/取消订阅，避免内存泄漏

4 Signals最佳实践与性能优化

4.1 信号设计原则

最小权限原则：
- 内部状态使用可写信号（signal()）
- 对外暴露只读计算信号（computed()）
- 避免直接暴露可写信号给外部组件

状态归一化：

复杂状态采用扁平化结构，避免深层嵌套
关联数据通过ID引用，而非嵌套对象

示例：

// 推荐：归一化状态
const users = signal({
  1: { id: 1, name: '张三' },
  2: { id: 2, name: '李四' }
});
const userPosts = signal({
  1: [101, 102], // 用户1的帖子ID列表
  2: [103]       // 用户2的帖子ID列表
});

不可变性优先：
- 优先使用set()和update()保持不可变性
- 仅在性能关键路径使用mutate()
- 复杂对象更新可使用immer库简化：
```
import { produce } from 'immer';

user.update(produce(draft => {
  draft.age = 31;
  draft.address.city = '北京';
}));
```

4.2 性能优化策略

减少计算信号的复杂度：

拆分复杂计算信号为多个简单计算信号
避免在计算信号中执行重型操作

示例：

// 不推荐：复杂计算信号
const complexComputation = computed(() => {
  const filtered = data().filter(...);
  const sorted = filtered.sort(...);
  return sorted.map(...);
});

// 推荐：拆分计算信号
const filteredData = computed(() => data().filter(...));
const sortedData = computed(() => filteredData().sort(...));
const mappedData = computed(() => sortedData().map(...));

控制副作用执行频率：

使用防抖/节流限制高频副作用

示例：

import { effect } from '@angular/core';
import { debounceTime } from 'rxjs/operators';
import { toObservable } from '@angular/core/rxjs-interop';

const searchQuery = signal('');

effect(() => {
  const query = searchQuery();
  // 防抖处理
  const debounced = toObservable(searchQuery).pipe(debounceTime(300));
  debounced.subscribe(value => {
    console.log('搜索:', value);
  });
});

避免不必要的依赖追踪：

减少计算信号和副作用中的信号读取
缓存不变的计算结果

示例：

// 不推荐：每次执行都读取信号
const filtered = computed(() => {
  return data().filter(item => item.value > threshold());
});

// 推荐：仅在threshold变化时重新计算
const thresholdValue = threshold();
const filtered = computed(() => {
  return data().filter(item => item.value > thresholdValue);
});

4.3 与RxJS的协同使用

Signals与RxJS并非互斥，而是互补关系，应根据场景选择合适的工具：

场景	推荐技术	理由
本地状态管理	Signals	简单直观，自动追踪依赖
复杂异步流（如合并多个请求）	RxJS	丰富的操作符（`switchMap`、`merge`等）
UI响应式更新	Signals	与模板集成更自然
时间相关操作（节流、防抖）	RxJS	强大的时间操作符

协同使用示例：

import { signal, computed, effect } from '@angular/core';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

// 信号：搜索关键词
const searchQuery = signal('');

// 转换为Observable并添加防抖
const searchQuery$ = toObservable(searchQuery).pipe(
  debounceTime(300),
  distinctUntilChanged()
);

// 转换回信号：搜索结果
const searchResults = toSignal(
  searchQuery$.pipe(
    switchMap(query => fetchResults(query))
  ),
  { initialValue: [] }
);

5 总结

Signals为Angular带来了全新的响应式编程体验，通过自动依赖追踪和简洁的API，显著降低了状态管理的复杂度。本章详细介绍了Signals全家桶API，包括基础信号的创建与更新、计算信号的衍生逻辑、副作用的处理，以及关联信号的同步机制。

在异步数据处理方面，toSignal()实现了Observable到Signal的无缝转换，结合资源API自动管理订阅生命周期，解决了传统RxJS的样板代码问题。购物车实战案例展示了如何基于Signals构建完整的状态管理方案，体现了单一数据源、读写分离、响应式更新等现代状态管理原则。

最佳实践部分总结了信号设计原则和性能优化策略，强调了不可变性、状态归一化和与RxJS的协同使用。随着Angular对Signals的持续增强，它将成为Angular应用中状态管理的首选方案，尤其是在独立组件架构中，能够充分发挥其简洁高效的优势。

掌握Signals不仅能够提升开发效率，还能构建更可预测、更易于调试的响应式应用，是现代Angular开发者必备的核心技能。

posted @ 2025-09-21 18:19 S&L·chuck 阅读(24) 评论(0) 收藏举报

刷新页面返回顶部

S&Lchuck

心之所系，吾之所爱

15_响应式编程核心：Signals 与异步管理

响应式编程核心：Signals与异步管理

1 Signals全家桶API：响应式状态的基石

1.1 基础操作：创建与更新信号

信号的创建与读取

信号的更新方法

1.2 高级能力：计算信号与副作用

计算信号（`computed()`）

副作用（`effect()`）

关联信号（`linkedSignal()`）

2 异步数据处理：从Observable到Signals

2.1 Observable转Signal：`toSignal()`

2.2 资源API：自动管理异步操作

2.3 异步信号的组合与依赖

3 状态管理实战：基于Signals的购物车

3.1 购物车状态设计与服务实现

3.2 组件集成与响应式UI

1. 商品列表组件（添加商品到购物车）

2. 购物车组件（展示与管理购物车）

3. 导航栏组件（展示购物车数量）

3.3 状态管理模式分析

4 Signals最佳实践与性能优化

4.1 信号设计原则

4.2 性能优化策略

4.3 与RxJS的协同使用

5 总结

公告

S&Lchuck

心之所系，吾之所爱

15_响应式编程核心：Signals 与异步管理

响应式编程核心：Signals与异步管理

1 Signals全家桶API：响应式状态的基石

1.1 基础操作：创建与更新信号

信号的创建与读取

信号的更新方法

1.2 高级能力：计算信号与副作用

计算信号（computed()）

副作用（effect()）

关联信号（linkedSignal()）

2 异步数据处理：从Observable到Signals

2.1 Observable转Signal：toSignal()

2.2 资源API：自动管理异步操作

2.3 异步信号的组合与依赖

3 状态管理实战：基于Signals的购物车

3.1 购物车状态设计与服务实现

3.2 组件集成与响应式UI

1. 商品列表组件（添加商品到购物车）

2. 购物车组件（展示与管理购物车）

3. 导航栏组件（展示购物车数量）

3.3 状态管理模式分析

4 Signals最佳实践与性能优化

4.1 信号设计原则

4.2 性能优化策略

4.3 与RxJS的协同使用

5 总结

公告

计算信号（`computed()`）

副作用（`effect()`）

关联信号（`linkedSignal()`）

2.1 Observable转Signal：`toSignal()`