Computed свойства

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

Создание computed свойства

Для определения computed свойства используется функция computed, которая принимает два аргумента:

Функция-вычислитель, возвращающая значение на основе зависимостей.
Массив зависимостей, состоящий из props, state или других computed свойств, от которых зависит вычисляемое значение.

Пример:

import { c, useState, computed } from "atomico";

function Counter() {
    const [count, setCount] = useState(0);

    const double = computed(() => count.value * 2, [count]);

    return c("div", null,
        c("p", null, `Count: ${count.value}`),
        c("p", null, `Double: ${double.value}`),
        c("button", { onclick: () => setCount(count.value + 1) }, "Increment")
    );
}

В этом примере double автоматически пересчитывается при каждом изменении count. Доступ к значению осуществляется через свойство .value.

Реактивность и зависимости

Computed свойства в Atomico обладают реактивной привязкой к зависимостям. Если одна из зависимостей изменяется, computed автоматически пересчитывается. Это позволяет избегать дублирования логики и гарантирует актуальность вычисляемых значений.

const sum = computed(() => a.value + b.value, [a, b]);

Здесь sum обновится при изменении любого из состояний a или b.

Важно учитывать, что зависимости должны быть реактивными объектами (useState или другие computed). Если в массиве зависимостей указать обычные значения, реактивности не произойдет.

Композиция computed свойств

Computed свойства можно использовать внутри других computed. Это создаёт цепочку реактивных вычислений:

const base = useState(10);
const squared = computed(() => base.value ** 2, [base]);
const doubledSquared = computed(() => squared.value * 2, [squared]);

Здесь doubledSquared пересчитается автоматически при изменении base, благодаря цепочке зависимостей.

Использование в шаблонах

Computed свойства можно применять напрямую в JSX-шаблонах или возвращаемом дереве компонентов. При рендере computed.value гарантированно содержит актуальное значение:

return c("div", null,
    c("p", null, `Squared: ${squared.value}`),
    c("p", null, `Doubled Squared: ${doubledSquared.value}`)
);

Такой подход позволяет избегать лишнего состояния, храня производные значения исключительно в computed.

Отличие от useState

useState управляет изменяемым состоянием, которое можно изменять через setter.
computed вычисляет значение на основе других состояний или props и не имеет собственного setter.

Computed свойства — это чистые функции от текущих данных. Любые попытки напрямую изменять .value не имеют смысла и не поддерживаются.

Примеры практического применения

Фильтрация данных

const [items, setItems] = useState([]);
const [query, setQuery] = useState("");

const filteredItems = computed(() => 
    items.value.filter(item => item.includes(query.value)), 
    [items, query]
);

Сложные вычисления на основе нескольких состояний

const [price, setPrice] = useState(100);
const [taxRate, setTaxRate] = useState(0.2);

const total = computed(() => price.value * (1 + taxRate.value), [price, taxRate]);

Комбинация props и состояния

function Greeting({ name }) {
    const [count, setCount] = useState(0);

    const message = computed(() => `Hello, ${name}! Count: ${count.value}`, [name, count]);

    return c("p", null, message.value);
}