NgrxStore和Angular-大规模使用异步管道或在构造函数中仅订阅一次 [英] NgrxStore and Angular - Use the async pipe massively or subscribe just once in the constructor
问题描述
我开始研究ngrx Store，并且看到使用Angular异步管道的便利.同时，我不确定是否大量使用Angular异步管道是一个不错的选择.
I am starting to look at ngrx Store and I see the convenience to use the Angular async pipe. At the same time I am not sure whether using the Angular async pipe massively is a good choice.
我举一个简单的例子.假设在同一模板中，我需要显示从商店中检索到的对象(例如，人物)的不同属性.
I make a simple example. Let's assume that in the same template I need to show different attributes of an object (e.g. a Person) which is retrieved from the Store.
一块模板代码可能是
<div>{{(person$ | async).name}}</div>
<div>{{(person$ | async).address}}</div>
<div>{{(person$ | async).age}}</div>
而组件类构造函数将具有
while the component class constructor would have
export class MyComponent {
person$: Observable<Person>;
constructor(
private store: Store<ApplicationState>
) {
this.person$ = this.store.select(stateToCurrentPersonSelector);
}
.....
.....
}
据我所知，这段代码暗含对同一Observable(person$)的3个订阅(通过异步管道在模板中进行).
As far as I understand this code implies 3 subscriptions (made in the template via the async pipe) to the same Observable (person$).
一种替代方法是在MyComponent中定义1个属性(person)，并且只有1个订阅(在构造函数中)填充该属性，例如
An alternative would be to define 1 property (person) in MyComponent and to have only 1 subscription (in the constructor) that fills the property, such as
export class MyComponent {
person: Person;
constructor(
private store: Store<ApplicationState>
) {
this.store.select(stateToCurrentPersonSelector)
.subscribe(person => this.person = person);
}
.....
.....
}
而模板使用标准属性绑定(即不使用异步管道)，例如
while the template uses standard property binding (i.e. without the async pipe), such as
<div>{{person.name}}</div>
<div>{{person.address}}</div>
<div>{{person.age}}</div>
现在是问题
两种方法在性能方面是否有差异?大量使用异步管道(即大量使用订阅)会影响代码的效率吗?
Is there any difference in terms of performance between the 2 approaches? Is the massive use of async pipe (i.e. a massive use of subscriptions) going to affect the efficiency of the code?
推荐答案
两者都不应该将应用程序组成为智能组件和演示文稿组件.
Neither, you should compose your application as smart and presentation components.
优势:
- 智能控制器上的所有商务逻辑.
- 只需一个订阅
- 可重用性
- 表示控制器仅负责一个职责，仅负责显示数据，并且不知道数据来自何处. (松散耦合)
回答最后一个问题:
大量使用异步管道将影响效率，因为它将订阅每个异步管道.如果您正在调用http服务，您会注意到更多，因为它会为每个异步管道调用http请求.
The massive use of async pipe will affect the efficiency, because it will subscribe to every async pipe. You can notice this more if you are calling a http service, because it will call the http request for each async pipe.
智能组件
@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() {
}
}
有关更多信息，请检查:
For more info check:
- https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.u27zmzf25
- http://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why/
这篇关于NgrxStore和Angular-大规模使用异步管道或在构造函数中仅订阅一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
