角度效果：将多个信号更新组合成一个效果，而不是为到达信号专门使用一个效果

Question

我想使用效果函数根据信号更新属性，但我有太多信号。

我知道如果信号发生变化，效果就会被触发，但我想知道为每个信号指定一个效果是否会更高效。

有人可以详细说明它在幕后是如何工作的吗？

示例1：将所有信号更新合并为一个效果，这意味着如果任何信号更新，它将重置所有属性

effect(() => {
  this.nativeElement.setAttribute('verticalUsed', `${ scrollbarService.verticalUsed() }`);
  this.nativeElement.setAttribute('horizontalUsed', `${ scrollbarService.horizontalUsed() }`);
  this.nativeElement.setAttribute('isVerticallyScrollable', `${ scrollbarService.isVerticallyScrollable() }`);
  this.nativeElement.setAttribute('isHorizontallyScrollable', `${ scrollbarService.isHorizontallyScrollable() }`);
});

示例 2：为每个信号更新指定一个效果

effect(() => {
  this.nativeElement.setAttribute('verticalUsed', `${ scrollbarService.verticalUsed() }`);
});
    
effect(() => {
  this.nativeElement.setAttribute('horizontalUsed', `${ scrollbarService.horizontalUsed() }`);
});
    
effect(() => {
  this.nativeElement.setAttribute('isVerticallyScrollable', `${ scrollbarService.isVerticallyScrollable() }`);
});
    
effect(() => {
  this.nativeElement.setAttribute('isHorizontallyScrollable', `${ scrollbarService.isHorizontallyScrollable() }`);
});

假设我有超过这 4 个信号，哪个示例的性能和效率更高？

Answer 1

首先，最好在模板中绑定属性，该模板已经在反应式上下文中运行。这样，您就不需要该效果，因为 Angular 将在发生更改时处理更新绑定。

接下来，我们来考虑是使用一个效果多次触发还是单独的效果。

单个效果仅在依赖关系图中创建一个节点，这更加节省内存。但是，它会设置多个属性并在每次信号更改时读取多个信号。请注意，检索信号值几乎是无成本的，因为该值已经被计算出来并且获取它是一个简单的读取操作。

另一方面，创建多个效果会导致依赖图中出现更多节点，但每个效果仅在其专用信号发生变化时运行。

在一个效果内读取 4 个信号的示例中，很难确定是否会有任何性能差异 - 可能不会。如果您正在考虑多次信号读取，则可能需要在内存使用量和运行如此大的函数所需的时间之间进行权衡（效果）。