Плюсы и минусы использования поведенческих тем для изменения значений

Question

Я понял, что вы должны использовать (Поведение) предметы для значений, которые могут меняться со временем. Но большую часть времени, когда я просматриваю исходный код других проектов, они используют примитивные типы данных для изменения значений.

Поэтому мой вопрос заключается в том, каковы плюсы и минусы использования исключительно предметов для изменения значений, подобных этому:

@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

async это труба, используемая для удобства разработчика

Обычная лучшая практика - создавать сухие компоненты. Это компоненты, которые не выполняют бизнес-логику, а просто визуализируют шаблон.

Ты можешь использовать async в шаблоне, чтобы сохранить компонент как можно более сухим. Это в основном компонент, который ничего не делает в своем class и вся работа выполняется в шаблоне.

Сухие компоненты имеют низкий риск и легко тестируются.

В тот момент, когда вы начинаете смешивать использование async Труба с бизнес-логикой в ​​компонентах начинает усложняться. Я не говорю, что это плохо или неправильно, но просто трудно найти связь между stuff | async и где stuff.next(value) случается.

Так что если у вас есть компонент, который не имеет логики, и шаблон использует async это легко поддерживать, но если у вас есть async в шаблоне, а компонент выполняет большую работу по созданию и выдаче значений наблюдаемым, его становится трудно поддерживать.

Одно преимущество не использовать async в шаблонах это то, что вы можете достичь точки останова в отладчике, и this для компонента представляет его текущее состояние. Если у вас есть async Вы не будете знать, какие текущие значения для наблюдаемых, используемых в представлении.

Answer 2

Есть несколько моментов:

Плюсы:

1. Наблюдаемые являются асинхронными, поэтому не блокируются. Это означает, что другие задачи могут быть обработаны, пока наблюдаемое ожидает.
2. Может быть много наблюдателей, подписывающихся на наблюдаемое. Любой из них будет проинформирован после получения данных.
3. Ведь сложные приложения будут быстрее.
4. Асинхронное программирование уже является современным и останется в будущем.

Минусы:

1. Просто немного сложно для начала.
2. Трудно проверить, иногда ужасно.

Answer 3

Преимущество: позволяет использовать OnPush Стратегия для компонента.

Недостатки: это более сложный, трудный для понимания и тестирования, и легче вводить ошибки из-за дополнительной сложности.