为了避免组件内部的 Observable 内存泄漏,我takeUntil()
在订阅 Observable 之前使用了运算符。
我在我的组件中写了这样的东西:
private unsubscribe$ = new Subject();
ngOnInit(): void {
this.http
.get('test')
.pipe(takeUntil(this.unsubscribe$))
.subscribe((x) => console.log(x));
}
ngOnDestroy(): void {
this.unsubscribe$.next();
this.unsubscribe$.complete(); // <--- ??
}
最后我的问题如下:
我需要写this.unsubscribe$.complete();
还是next()
就够了?
是unsubscribe$
要由垃圾收集器没有完成被抓住?
请解释是否存在差异或无关紧要。我不希望我的组件出现内存泄漏。
简短的回答,不,这不是必需的,但也无妨。
长答案:
只有在阻止垃圾收集时才需要取消订阅/完成 angular ,因为订阅涉及某些主题,该主题将因收集而比组件寿命更长。这就是内存泄漏的产生方式。
如果我有服务:
export class MyService {
mySubject = new Subject();
}
它在 root 中提供,并且只在 root 中提供(这意味着它是一个单例并且在实例化后永远不会被销毁)以及一个注入此服务并订阅它的主题的组件
export class MyLeakyComponent {
constructor(private myService: MyService) {
this.myService.mySubject.subscribe(v => console.log(v));
}
}
这是造成内存泄漏。为什么?因为 MyLeakyComponent 中的订阅是由 MyService 中的主题引用的,所以只要 MyService 存在并持有对它的引用,MyLeakyComponent 就不能被垃圾收集,并且 MyService 将在应用程序的生命周期内存在。每次实例化 MyLeakyComponent 时,这都会复合。要解决此问题,您必须取消订阅或在组件中添加终止运算符。
但是这个组件:
export class MySafeComponent {
private mySubect = new Subject();
constructor() {
this.mySubject.subscribe(v => console.log(v));
}
}
是完全安全的,可以毫无问题地进行垃圾收集。没有外部持久化实体持有对它的引用。这也是安全的:
@Component({
providers: [MyService]
})
export class MyNotLeakyComponent {
constructor(private myService: MyService) {
this.myService.mySubject.subscribe(v => console.log(v));
}
}
现在注入的服务由组件提供,因此服务和组件将一起销毁,并且可以安全地进行垃圾回收,因为外部引用也将被销毁。
这也是安全的:
export class MyHttpService { // root provided
constructor(private http: HttpClient) {}
makeHttpCall() {
return this.http.get('google.com');
}
}
export class MyHttpComponent {
constructor(private myhttpService: MyHttpService) {
this.myhttpService.makeHttpCall().subscribe(v => console.log(v));
}
}
因为http调用是一类自终止的observable,所以在调用完成后自然终止,所以不需要手动完成或取消订阅,因为外部引用一旦自然完成就消失了。
至于你的例子:unsubscribe$
主题是组件本地的,因此它不可能导致内存泄漏。任何地方学科都是如此。
关于最佳实践的说明:Observables 是 COMPLEX。一个看起来完全安全的人,可能以一种微妙的方式涉及一个外部主题。为了完全安全/如果您对 observables 不是很满意,通常建议您取消订阅所有非终止 observables。除了你自己花时间做这件事外,没有其他缺点。我个人认为 unsubscribe$ 信号方法很糟糕,并认为它会污染/混淆您的流。对我来说最简单的是这样的:
export class MyCleanedComponent implements OnDestroy {
private subs: Subscription[] = [];
constructor(private myService: MyService) {
this.subs.push(
this.myService.mySubject.subscribe(v => console.log(v)),
this.myService.mySubject1.subscribe(v => console.log(v)),
this.myService.mySubject2.subscribe(v => console.log(v))
);
}
ngOnDestroy() {
this.subs.forEach(s => s.unsubscribe());
}
}
但是,防止泄漏的唯一最佳方法是尽可能使用 angular 提供的异步管道。它为您处理所有订阅管理。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句