简述
Angular Signals 是 Angular 为我们带来的一种更细粒度响应式能力，以尝试摆脱传统的基于 zone.js 的变更检测机制。在 Angular 中，Signal 是由调用后立即返回当前值的零参数的 Getter 函数表示的。该 Getter 函数具有一个 [SIGNAL] 属性，框架可以用该属性辨识 signals 以用于内部优化
变更检测
Angular 可以使用Signal作为检测和触发更改的新方法，而不是当前默认的脏检查整个组件树的方法
- 基于Zone.js的变更检测
- 基于Signal的变更检测
创建Signal
@Component({
selector: 'my-app',
standalone: true,
template: `
<div> Count: {{ count() }} </div>
<div> Double: {{ double() }} </div>
<button (click)="plusCount()"></button>
<button (click)="decreaseCount()"></button>
`,
})
export class AppComponent{
count = signal(0)
double = computed(() => this.count() * 2);
plusCount() {
this.count.update((value) => value + 1)
}
decreaseCount() {
this.count.update((value) => value - 1)
}
}
signal签名
export function signal<T>(initialValue: T, options?: CreateSignalOptions<T>): WritableSignal<T>
export interface CreateSignalOptions<T> {
/**
* 比较函数 比较signal新值旧值是否相等 避免没必要的性能损耗.
*/
equal?: ValueEqualityFn<T>;
}
该signal函数是一个创建 Signal 的 函数。它需要两个参数：
initialValue初始值，可以是任意类型T在很多情况下，数据类型是可以推断出来的，泛型类型参数是不必要的。options是一个类型的对象CreateSignalOptions，它包括一个equal用于比较类型的两个值的方法T。如果options在创建信号时未提供该对象，defaultEquals则将使用该函数。该函数使用运算符和方法的组合来defaultEquals比较相同类型的两个值T``===``Object.is
修改Signal
signal函数返回一个WritableSignal<T> .signal是一个 getter 函数，但类型WritableSignal 给出了通过三种方法来修改值
/**
* 直接设置为新值，并通知任何消费者。
*/
set(value: T): void;
/**
* 根据信号的当前值更新signal的值，并通知任何消费者。
*/
update(updateFn: (value: T) => T): void;
/**
* 根据信号的当前值更新signal的值，并通知任何消费者。
*/
mutate(mutatorFn: (value: T) => void): void;
- set用于替换
- update 通过当前值来更新signal的值，最终会调用
WritableSignalset方法 - mutate 通过当前值来更新signal的值 一般用于更新对象，数组
注册Signal消费者
可以通过使用effect和computed函数来添加消费者
-
effect
当需要监听
signal的变化时可以使用effect，只要这些信号值中的任何一个发生变化，effect就会再次运行，effect并不是在任何地方都能使用，因为effect依赖Injector,如果不指定具体的Injector会自动获取当前的Injector如果不存在就会抛出异常，检查源码如下:export function assertInInjectionContext(debugFn: Function): void { // Taking a `Function` instead of a string name here prevents the unminified name of the function // from being retained in the bundle regardless of minification. if (!getInjectImplementation() && !getCurrentInjector()) { throw new RuntimeError( RuntimeErrorCode.MISSING_INJECTION_CONTEXT, ngDevMode && (debugFn.name + '() can only be used within an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`')); } }所以一般在
constructor使用即可，如下所示@Component({ selector: 'my-app', standalone: true, template: ` <div> Count: {{ count() }} </div> <div> Double: {{ double() }} </div> <button (click)="plusCount()"></button> <button (click)="decreaseCount()"></button> `, }) export class AppComponent{ count = signal(0) double = computed(() => this.count() * 2); constructor() { effect(() => { console.log(`The count is: ${this.count()})`); }); } plusCount() { this.count.update((value) => value + 1) } decreaseCount() { this.count.update((value) => value - 1) } }如果想在任意地方使用
effect需要手动指定Injector@Component({ selector: 'my-app', standalone: true, template: ` <div> Count: {{ count() }} </div> <div> Double: {{ double() }} </div> <button (click)="plusCount()"></button> <button (click)="decreaseCount()"></button> `, }) export class AppComponent{ count = signal(0) double = computed(() => this.count() * 2); constructor(private injector: Injector) { } constructorOutside() { effect(() => { console.log(`The count is: ${this.count()})`); }, {injector: this.injector}); } plusCount() { this.count.update((value) => value + 1) } decreaseCount() { this.count.update((value) => value - 1) } }释放
effect一般情况当组件销毁时会自动释放effect, 如果不想自动释放可以指manualCleanup为true，如下所示@Component({ selector: 'my-app', standalone: true, template: ` <div> Count: {{ count() }} </div> <div> Double: {{ double() }} </div> <button (click)="plusCount()"></button> <button (click)="decreaseCount()"></button> `, }) export class AppComponent{ count = signal(0) double = computed(() => this.count() * 2); constructor(private injector: Injector) { } constructorOutside() { effect(() => { console.log(`The count is: ${this.count()})`); }, {injector: this.injector, manualCleanup: true}); } plusCount() { this.count.update((value) => value + 1) } decreaseCount() { this.count.update((value) => value - 1) } }手动释放
effect,effect()返回值类型EffectRef，调用EffectRef的destroy()Injector在effect中的作用就是隔离效果，比如A组件中的Signal变化不会影响B组件的effect,每个Injector实例都会自动注册EffectManager提供商来管理各自的effect -
computed
如果有另一个值依赖于其他Signal的值，并且需要重新计算时就可以使用
computedcomputed函数签名：export function computed<T>(computation: () => T, options?: CreateComputedOptions<T>): Signal<T> { const node = new ComputedImpl(computation, options?.equal ?? defaultEquals); return createSignalFromFunction(node, node.signal.bind(node)) as unknown as Signal<T>; }computed返回值是Signal<T>是只读的，因此不能通过set,update等方法去修改Signal，只有computed依赖的signal发生变化时，就会自动更新
© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
