使用 Behaviorsubjects 改变值的优缺点

Question

我知道您应该使用 (Behavior)subjects 来表示可以随时间变化的值。但大多数时候，当我查看其他项目的源代码时，他们使用原始数据类型来更改值。

所以我的问题是像这样只使用 Subjects 来改变值的优点和缺点是什么：

@Component({
    selector: 'app-test',
    template: `
        <div> 
            <div *ngIf="isLoading | async">
                <img src="loading.gif"/>
            </div>

            <div *ngIf="errorCode | async">
                An error occurred. Please try again later.
            </div>

            <ng-container *ngIf="data | async; let jobs">
                <div *ngFor="let job of jobs;">
                    {{ job.title }}
                </div>
            </ng-container>
        </div>
    `
})
export class TestComponent implements OnInit {
    errorCode = new BehaviorSubject<number | null>(null);
    isLoading = new BehaviorSubject<boolean>(true);
    data      = new BehaviorSubject<any>(null);

    constructor(
        public service: TestService,
    ) {}

    public ngOnInit() {
        this.isLoading.next(true);
        this.getData();
    }

    public getData() {
        this.service.getData().subscribe((data)=> {
            this.data.next(data);
            this.isLoading.next(false);
        }, (error: HttpErrorResponse) => {
            this.errorCode.next(error.status);
            this.isLoading.next(false);
        });
    }
}

与像这样使用原始数据类型相比：

@Component({
    selector: 'app-test',
    template: `
        <div> 
            <div *ngIf="isLoading">
                <img src="loading.gif"/>
            </div>

            <div *ngIf="errorCode">
                An error occurred. Please try again later.
            </div>

            <ng-container *ngIf="data; let jobs">
                <div *ngFor="let job of jobs;">
                    {{ job.title }}
                </div>
            </ng-container>
        </div>
    `
})
export class TestComponent implements OnInit {
    errorCode : number | null = null;
    isLoading : boolean = true;
    data : any = null;

    constructor(
        public service: TestService,
    ) {}

    public ngOnInit() {
        this.isLoading = true;
        this.getData();
    }

    public getData() {
        this.service.getData().subscribe((data)=> {
            this.data = data;
            this.isLoading = false;
        }, (error: HttpErrorResponse) => {
            this.errorCode = error.status;
            this.isLoading = false;
        });
    }
}

很抱歉问了这么笼统的问题，但这个话题让我很难过，我找不到任何结论性的答案

Answer 1

优点：它允许对组件使用 OnPush 策略。

缺点：更复杂，更难理解和测试，并且由于额外的复杂性更容易引入错误。

Answer 2

有几点：

优点：

可观察对象是异步的，因此是非阻塞的。这意味着，在可观察对象等待时可能会处理其他任务。
可能有很多观察者订阅了 observable。一旦数据到达，他们中的任何一个都会得到通知。
毕竟复杂的应用程序会更快。
异步编程已经是最先进的技术，将来也会保留。

缺点：

刚开始有点复杂。
很难测试，有时很可怕。

Answer 3

async是为了方便开发者使用的管道。

常见的最佳实践 是创建干燥组件。这些组件不执行任何业务逻辑，只是呈现一个模板。

您可以在模板中使用 async 以使组件尽可能干燥。它基本上是一个在其 class 中什么都不做的组件，所有工作都在模板中完成。

Dry 组件风险低且易于测试。

当您开始混合使用async管道和组件中的业务逻辑时，它开始变得复杂。我并不是说它是坏的或错的，只是很难找到 stuff | async 和 stuff.next(value) 发生的地方之间的联系。

所以如果你有一个没有逻辑的组件，并且模板使用 async 它很容易维护，但是如果你在模板中有 async 并且组件正在做很多事情努力为 observables 创造和发射价值变得难以维护。

not 在模板中使用 async 的一个优点是您可以在调试器中命中断点，并且组件的 this 代表其当前状态。如果您有 async，您将不知道视图中使用的可观察对象的当前值是多少。

使用 Behaviorsubjects 改变值的优缺点

Pros and cons of using Behaviorsubjects for changing values

angular

behaviorsubject