Локальное состояние компонента

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

Свойства компонента и реактивность

FAST Element использует реактивные свойства (@observable), которые автоматически уведомляют систему о любых изменениях. Объявление свойства в классе компонента осуществляется с помощью декоратора @observable или через статический метод define при использовании FASTElement:

import { FASTElement, html, observable } from "@microsoft/fast-element";

class Counter extends FASTElement {
    @observable count = 0;
}

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

Привязка данных в шаблоне

FAST Element применяет декларативные привязки, позволяющие синхронизировать свойства компонента с DOM. Основные виды привязок:

  • Односторонняя привязка (:) – от свойства к элементу DOM.
  • Двусторонняя привязка (=) – синхронизация в обе стороны.
  • Событийная привязка (@) – вызов метода при событии DOM.

Пример использования локального состояния в шаблоне:

const template = html<Counter>`
    <div>
        <p>Текущее значение: ${x => x.count}</p>
        <button @click="${x => x.increment()}">Увеличить</button>
    </div>
`;

class Counter extends FASTElement {
    @observable count = 0;

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

При изменении свойства count автоматически обновляется текст в параграфе.

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

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

class Counter extends FASTElement {
    @observable count = 0;

    countChanged(oldValue, newValue) {
        console.log(`Count изменился с ${oldValue} на ${newValue}`);
    }
}

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

Локальные свойства и приватное состояние

Для скрытого состояния компонента можно использовать обычные приватные поля класса:

class Toggle extends FASTElement {
    #isActive = false;

    toggle() {
        this.#isActive = !this.#isActive;
        this.requestUpdate();
    }
}

Метод requestUpdate() инициирует ререндеринг шаблона, даже если используется приватное поле, не объявленное реактивным.

Оптимизация обновлений

FAST Element оптимизирует процесс обновления DOM:

  • Обновление происходит только при изменении значения свойства.
  • Сравнение нового и старого значения выполняется по ссылке для объектов и по значению для примитивов.
  • Для массивов и объектов рекомендуется использовать @observable с отдельными реактивными методами (splice, push) или заменой массива целиком, чтобы система отследила изменения.

Связь локального состояния с атрибутами

Свойства компонента можно синхронизировать с HTML-атрибутами через декларацию свойства:

class MyElement extends FASTElement {
    @observable value = "";

    static override define = {
        attributes: ["value"]
    };
}

Изменение атрибута <my-element value="новое"> автоматически обновит свойство value, и наоборот.

События при изменении состояния

Для интеграции с другими компонентами можно испускать кастомные события при изменении состояния:

class Counter extends FASTElement {
    @observable count = 0;

    increment() {
        this.count += 1;
        this.$emit('count-changed', { detail: this.count });
    }
}

Метод $emit упрощает создание и распространение событий, сохраняя синтаксис компактным и декларативным.

Итоговые принципы работы локального состояния

  1. Использовать @observable для реактивных свойств.
  2. Привязывать свойства к шаблону декларативно.
  3. Обрабатывать изменения через <propertyName>Changed методы.
  4. Для приватного состояния использовать поля класса с вызовом requestUpdate().
  5. Синхронизировать свойства с атрибутами при необходимости.
  6. Выпускать кастомные события для внешнего взаимодействия.

Эти принципы создают гибкую, производительную и предсказуемую архитектуру компонентов FAST Element, позволяя управлять локальным состоянием эффективно и безопасно.

Оглавление