angular - NgrxStore和Angular-大规模使用异步管道或在构造函数中仅订阅一次

我开始研究ngrx Store，并且看到使用Angular异步管道的便利。同时，我不确定是否大量使用Angular异步管道是一个不错的选择。

我举一个简单的例子。假设在同一模板中，我需要显示从商店中检索到的对象(例如，人物)的不同属性。

一段模板代码可能是

<div>{{(person$ | async).name}}</div>
<div>{{(person$ | async).address}}</div>
<div>{{(person$ | async).age}}</div>

而组件类的构造函数将具有

export class MyComponent {
  person$: Observable<Person>;

  constructor(
    private store: Store<ApplicationState>
  ) {
      this.person$ = this.store.select(stateToCurrentPersonSelector);
  }
.....
.....
}

据我了解，此代码暗含对同一Observable(person$)的3个订阅(通过异步管道在模板中进行)。

一种替代方法是在MyComponent中定义1个属性(person)，并且只有1个订阅(在构造函数中)填充该属性，例如

export class MyComponent {
  person: Person;

  constructor(
    private store: Store<ApplicationState>
  ) {
      this.store.select(stateToCurrentPersonSelector)
                .subscribe(person => this.person = person);
  }
.....
.....
}

而模板使用标准属性绑定(bind)(即不使用异步管道)，例如

<div>{{person.name}}</div>
<div>{{person.address}}</div>
<div>{{person.age}}</div>

现在问题

两种方法之间在性能方面有什么区别吗？大量使用异步管道(即大量使用订阅)会影响代码的效率吗？

最佳答案

都不应该将应用程序组成智能和演示组件。

优势:

智能 Controller 上的所有增强逻辑。

只需订阅一个

可重用性

表示 Controller 仅负责一个职责，仅表示数据，不知道数据来自何处。 (松散耦合)

回答最后一个问题:

异步管道的大量使用将影响效率，因为它将订阅每个异步管道。如果您正在调用http服务，您会注意到更多，因为它将为每个异步管道调用http请求。

智能组件

@Component({
  selector: 'app-my',
  template: `
      <app-person [person]="person$ | async"></app-person>
`,
  styleUrls: ['./my.component.css']
})
export class MyComponent implements OnInit {

    person$: Observable<Person>;

    constructor(private store: Store<ApplicationState>) {}

    ngOnInit() {
        this.person$ = this.store.select(stateToCurrentPersonSelector);
    }

}

演示组件

@Component({
  selector: 'app-person',
  template: `
    <div>{{person.name}}</div>
    <div>{{person.address}}</div>
    <div>{{person.age}}</div>
`,
  styleUrls: ['./my.component.css']
})
export class PersonComponent implements OnInit {

    @Input() person: Person;

    constructor() {}

    ngOnInit() {
    }

}

http://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why/

关于angular - NgrxStore和Angular-大规模使用异步管道或在构造函数中仅订阅一次，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41707721/