Tracked properties

Tracked properties — это концепция, введенная в Ember.js для более эффективного управления реактивностью данных в компонентах и моделях. Она заменяет старую систему наблюдения за состоянием объектов, предоставляя разработчикам более простую и предсказуемую модель управления состоянием.

Основы Tracked Properties

В Ember.js для создания реактивных свойств в моделях и компонентах до недавнего времени использовалась система “обработчиков свойств”, основанная на Ember.Object. Однако эта модель оказалась сложной для понимания и сопровождения, особенно в больших приложениях. Tracked properties представляют собой более легковесный и интуитивно понятный способ работы с реактивностью.

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

Как использовать Tracked properties

В Ember.js для работы с отслеживаемыми свойствами используется декоратор @tracked. Этот декоратор позволяет пометить поле как отслеживаемое. Когда значение отслеживаемого свойства изменяется, компонент или модель будет автоматически перерисована. Это значительно упрощает разработку, избавляя от необходимости вручную управлять обновлением UI.

Пример использования:

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class MyComponent extends Component {
  @tracked count = 0;

  increment() {
    this.count++;
  }
}

В этом примере свойство count помечено как отслеживаемое с помощью декоратора @tracked. Когда значение count изменяется, Ember автоматически перерисовывает компонент, где это свойство используется.

Как работает реактивность

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

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

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class MyComponent extends Component {
  @tracked count = 0;

  get doubledCount() {
    return this.count * 2;
  }

  increment() {
    this.count++;
  }
}

В данном примере, при изменении значения count, свойство doubledCount будет автоматически пересчитано, и все привязанные элементы в шаблоне также будут обновлены.

Отличие от вычисляемых свойств

Стоит отметить, что в Ember.js есть два основных подхода для работы с реактивностью:

  1. Tracked properties — для отслеживания обычных значений, которые изменяются непосредственно.
  2. Computed properties — для более сложных вычислений, где результат зависит от нескольких свойств и часто требует дополнительной логики.

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

Производительность и оптимизация

Использование @tracked также значительно улучшает производительность по сравнению с предыдущей моделью наблюдения за свойствами. Ember отслеживает изменения только тех свойств, которые помечены как @tracked, и обновляет только те части приложения, которые действительно зависят от этих свойств. Это позволяет избежать ненужных перерасчетов и рендеринга, повышая эффективность работы приложения.

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

Трекинг в моделях

Кроме компонентов, @tracked также можно использовать в моделях, созданных с использованием Ember Data. Это позволяет отслеживать изменения в данных, которые могут влиять на отображение модели в интерфейсе.

Пример использования в модели:

import Model, { attr } from '@ember-data/model';
import { tracked } from '@glimmer/tracking';

export default class PostModel extends Model {
  @attr('string') title;
  @tracked commentsCount = 0;

  incrementComments() {
    this.commentsCount++;
  }
}

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

Расширения и кастомизация

Хотя @tracked является стандартным способом работы с реактивностью в Ember, разработчики могут создавать свои собственные механизмы для кастомизации или расширения этой функциональности. Например, можно создать вспомогательные функции или классы для работы с более сложными зависимостями, если стандартного механизма недостаточно.

Пример кастомного трекинга:

import { tracked } from '@glimmer/tracking';

class CustomTracked {
  @tracked value = 0;

  increment() {
    this.value++;
  }

  decrement() {
    this.value--;
  }
}

В этом примере создается класс CustomTracked, который использует @tracked для управления реактивным состоянием.

Заключение

Tracked properties представляют собой важную часть экосистемы Ember.js, предлагая более легкую и эффективную модель работы с реактивностью данных. Благодаря системе отслеживания изменений, Ember позволяет разработчикам сосредоточиться на логике приложения, не беспокоясь о сложных механизмах обновления UI. С помощью декоратора @tracked можно легко управлять состоянием в компонентах и моделях, а автоматическая реактивность снижает количество ошибок и улучшает производительность приложений.

Оглавление