Angular 进阶之五： Signals到底用不用？-编程知识

Angular 进阶之五： Signals到底用不用？

Angular 在V16的时候推出了Signals，在17正式作为主打功能之一强烈推荐，看过了各种博主的各种科普文章也没说明白，到底这东西值不值得用？毕竟项目大了，重构代码也不是闹着玩儿的。各种科普文章主要在说两点：

1. 用了性能提高

2. 用了方便，你改一个，使用的地方自动就获得通知。（听起来和Rxjs的Observer一样）

在Angular项目日常开发过程中主要的矛盾其实就两个。

1. Object的成员改了，不会触发子组件(component)的ngOnChange。需要手动调用detectChanges。

2. 性能，其中之一就是html template里头不能用function，不然会不停的调用。

这也是Signals可能可以解决的两个问题。我们用下面一个简单的例子来说明。

import { Component, signal, computed } from '@angular/core';interface Member {id: number;name: string;value: number;
}@Component({template: `<div><p>{{targetsSignal()[0].name}} has {{targetsSignal()[0].value}}</p><button (click)="increase()">Increase</button><button (click)="decrease()" [disabled]="canDecrease()">Decrease</button><p>Name starts with M</p><div *ngFor="let member of computedNames()">{{member.id}} - {{member.name}}</div><div style="height: 300px; width: 300px; background-color: #2f487e;" (mousemove)="onMousemove()"></div><test-signal-sub [members]="targetsSignal()"></test-signal-sub></div>`,selector: 'test-signal',
})export class SignalComponent {counter = 0;counter1 = 0;targets: Member[] = [{name: 'Maria', id: 1, value: 1}, {name: 'Michel', id: 2, value: 1}, {name: 'Jack', id: 3, value: 1}, {name: 'John', id: 4, value: 1}, {name: 'Sam', id: 5, value: 1}, {name: 'Mila', id: 6, value: 1}];readonly targetsSignal = signal<Member[]>(this.targets);computedNames = computed(() => {this.counter++console.log("namesFiltered() called! " + this.counter + " times!");return this.targetsSignal().filter(item => item.name.startsWith('M'));})constructor() {}onMousemove() {// console.log('Mouse moved');}increase() {const newTargets = [].concat(this.targetsSignal());newTargets[0].value += 1;this.targetsSignal.set(newTargets);}decrease() {this.targetsSignal.update(val => { val[0].value -= 1;return val;});}canDecrease() {this.counter1++;console.log("canDecrease() called! " + this.counter1 + " times!");return this.targetsSignal()[0].value <= 0;}
}

import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';@Component({template: `<div><p>Sub signal component below:</p><p>{{name}} preferred {{color}}</p><p>{{members[0].name}} has value {{members[0].value}}</p></div>`,selector: 'test-signal-sub',
})export class SignalSubComponent implements OnChanges {@Input() members: any;color = '';name = '';readonly preferedColor = [{name: 'Maria', color: 'red'}, {name: 'Michel', color: 'blue'}, {name: 'Jack', color: 'yellow'}, {name: 'John', color: 'green'}, {name: 'Sam', color: 'black'}, {name: 'Mila', color: 'white'}];constructor() {}ngOnChanges(changes: SimpleChanges): void {if (changes.members?.previousValue !== changes.members?.currentValue) {const index = changes.members?.currentValue[0].value % changes.members?.currentValue.length ?? 0;this.color = this.preferedColor[index].color;this.name = this.preferedColor[index].name;}}
}

两个组件，父组件的html template里绑定了computedNames，和canDecrease，从外表也看不出来区别，但是如果使用鼠标在蓝色区域晃动，控制台就会打印canDecrease被不停调用，computedNames没事，这个例子说明了Signal可以被用在html template里，解决的主要场景之一就是button的状态，现实中不都是理想情况，button属于form，一个valid状态就解决了button是不是disable。很多情况button的[disabled]后面跟了一串判断，"a || b || !c || d"等等，现在有了signal就直接一个signal就好了。但是重构时需要把涉及到的a,b,c,d这些成员都改成signal。这就可能需要一次重构一整个component。

在上面例子中increase使用set每次用新数组更新signal，decrease使用update，每次只改原来的数组，在子组件中，会看到，increase会触发子组件的ngOnChange，但是decrease不会。这就和原来没什么区别了。还是Angular的老问题，对象引用不变，成员变，无法触发子组件的ngOnChange。