Значения по умолчанию

В библиотеке Atomico значения по умолчанию играют важную роль при работе с компонентами. Они позволяют задавать начальное состояние свойств и управлять поведением компонентов без необходимости вручную проверять наличие всех параметров при каждом рендере. В Atomico используются props с возможностью задания дефолтных значений через специальный синтаксис.

Определение значений по умолчанию

Значения по умолчанию задаются при описании свойств компонента с помощью функции prop. Структура записи выглядит следующим образом:

import { c, prop } from "atomico";

function MyComponent({ title, count }) {
    return (
        <host>
            <h1>{title}</h1>
            <p>Количество: {count}</p>
        </host>
    );
}

MyComponent.props = {
    title: prop.string({ default: "Заголовок по умолчанию" }),
    count: prop.number({ default: 0 })
};

export const myComponent = c(MyComponent);

В этом примере:

  • title получает значение "Заголовок по умолчанию", если при использовании компонента оно не передано.
  • count будет равен 0, если не указано иное.

Ключевой момент: default применяется только в том случае, если свойство не передано пользователем. Если свойство присутствует, оно переопределяет дефолтное значение.

Типизация и значения по умолчанию

Atomico поддерживает строгую типизацию props, что позволяет сочетать default с проверкой типов:

import { c, prop } from "atomico";

function UserCard({ name, age }) {
    return (
        <host>
            <p>Имя: {name}</p>
            <p>Возраст: {age}</p>
        </host>
    );
}

UserCard.props = {
    name: prop.string({ default: "Аноним" }),
    age: prop.number({ default: 18 })
};

Если попытаться передать значение несоответствующего типа, Atomico выведет предупреждение в консоль, сохраняя дефолтное значение, если оно корректно по типу.

Дефолтные функции и объекты

Для сложных значений, таких как массивы, объекты или функции, рекомендуется использовать фабричные функции, чтобы избежать общих ссылок на один объект:

import { c, prop } from "atomico";

function TodoList({ todos }) {
    return (
        <host>
            <ul>
                {todos.map(todo => <li>{todo}</li>)}
            </ul>
        </host>
    );
}

TodoList.props = {
    todos: prop.array({ default: () => [] })
};

Использование () => [] создаёт новый массив при каждом рендере, что предотвращает побочные эффекты, связанные с изменением общего состояния.

Наследование и переопределение значений

Если компонент наследует или расширяет другой компонент, дефолтные значения props можно переопределять. Atomico объединяет дефолтные значения по ключу props:

const BaseButton = c(() => <host><slot /></host>);
BaseButton.props = {
    color: prop.string({ default: "blue" })
};

const DangerButton = c(BaseButton);
DangerButton.props = {
    color: prop.string({ default: "red" })
};

При использовании DangerButton значение color по умолчанию будет "red", даже если базовый компонент имел другой дефолт.

Связь значений по умолчанию с реактивностью

Atomico автоматически делает свойства реактивными. Значения по умолчанию интегрируются в реактивную систему и обновляют DOM при изменении:

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

function Counter({ initial }) {
    const [count, setCount] = useState(initial);
    return (
        <host>
            <button onCl ick={() => setCount(count + 1)}>
                Счёт: {count}
            </button>
        </host>
    );
}

Counter.props = {
    initial: prop.number({ default: 0 })
};

Если initial не передан, состояние count стартует с 0. Любое изменение свойства после рендера также будет синхронизировано с компонентом, если оно реактивно.

Особенности работы с булевыми значениями

Булевы значения по умолчанию обрабатываются Atomico особым образом. Присутствие атрибута в DOM без значения считается true, а отсутствие — false, при этом дефолт учитывается только при полном отсутствии:

function Toggle({ active }) {
    return (
        <host>
            <p>{active ? "Включено" : "Выключено"}</p>
        </host>
    );
}

Toggle.props = {
    active: prop.boolean({ default: false })
};

Если в DOM <toggle active> — active будет true. Если <toggle> — применится дефолтное false.

Итоговые рекомендации по использованию

  • Значения по умолчанию лучше использовать для обеспечения безопасного рендера без ошибок undefined.
  • Для объектов, массивов и функций использовать фабрики, чтобы избежать общих ссылок.
  • Типизация props помогает предотвратить неправильное использование дефолтных значений.
  • Значения по умолчанию работают корректно вместе с реактивными состояниями, позволяя интегрировать их в логику компонента без дополнительных проверок.
Оглавление