Является ли привязка данных в шаблоне из внешнего объекта плохой практикой?

Question

Допустим, у меня есть магазин (большой одноэлементный объект), в котором я сохраняю общее состояние приложения. Этот магазин добавляется в компоненты, если это необходимо. Однако есть компоненты, которые используют только одно свойство из хранилища и используют его для условных обозначений в своих шаблонах (как, конечно, только для чтения).

Есть ли здесь предпочтительная практика? Должен ли я использовать собственность прямо из магазина для инъекций

class MyComponent {

    constructor(private store: Store) {}
}

// template

<div *ngIf="store.someFlag">...</div>

или я должен создать частную собственность в компоненте и затем использовать ее в шаблоне?

class MyComponent {

    someFlag: boolean;

    constructor(private store: Store) {
        this.someFlag = store.someFlag;
    }
}

// template

<div *ngIf="someFlag">...</div>

Меня больше всего беспокоит производительность - влияет ли доступ к данным из большого объекта в шаблоне на производительность циклов обнаружения угловых изменений?

Answer 1

Я хотел бы указать на другую проблему, которую я вижу в подходе: вы связываете компоненты с тем, как вы реализовали глобальное состояние.Делая это, вы тесно связываете их.

Скажем, вы хотите изменить структуру своего глобального состояния.Например, вы хотите переместить объект на один уровень вниз в иерархии состояния.При вашем подходе вам придется прикасаться к каждому компоненту, возможно, несколько раз для каждого компонента.

Я бы порекомендовал оставить компоненты как можно более глупыми.Дайте им фактический объект, который они могут прочитать или изменить как @Input().Пусть они работают над этим.Добавьте @Output(), когда / если объект изменяется.

Таким образом, вы более четко разделяете проблемы: компоненты должны просто знать, как обращаться с одним конкретным классом, а не с общим состоянием.

Answer 2

Прежде всего, я предпочитаю использовать store.someFlag напрямую, так как это свойство может измениться, и оно будет немедленно отражено на странице, тогда как если вы назначите его локальной переменной, эта переменная не изменится со временем (если вы не сделаете что-то ). Присвоение переменной имеет смысл, если вы планируете изменить это значение локально и не хотите, чтобы это изменение распространялось обратно в хранилище. Я делаю это, когда я хочу, чтобы приложение «Дата» изначально применялось к этому экрану, но экран может изменить уже локальную дату назад и заставить пользователя работать по своему усмотрению.

И, во-вторых, если вы планируете использовать хранилище в шаблоне, убедитесь, что вы сделали его общедоступным в конструкторе (не частным), поскольку оно не будет соответствовать более строгим правилам производства.

class MyComponent {

    constructor(public store: Store) {}
}

Answer 3

class MyComponent {

    constructor(public store: Store) {}
}

// template

<div *ngIf="store.someFlag">...</div>

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