import { Meta } from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/ru/functional/Functions/render - Рендеринг компонентов с ключами'/>

# `render`

Обертка над функцией Vue `h` (hyperscript), которая обеспечивает автоматическую генерацию ключей для компонентов. Она гарантирует, что компоненты имеют уникальные ключи для эффективного рендеринга и обработки переходов, особенно при работе со списками или динамическими элементами.

**Параметры:**
- `name: string | any` — Имя или тег компонента для рендеринга.
- `props?: T` — Свойства, передаваемые компоненту.
- `children?: RawChildren | RawSlots` — Дочерние элементы или слоты компонента.
- `index?: string` — Необязательный индекс или идентификатор, используемый для генерации ключа.

**Возвращает:**
`VNode` — Отрендеренный виртуальный узел.

```typescript
import { render } from '@dxtmisha/functional'

// Рендерит div с автоматически сгенерированным ключом
const vnode = render('div', { class: 'container' }, 'Привет, мир')
// key => '.div.container'

// Рендерит компонент с определенным индексом для генерации ключа
const item = render('my-component', { data: itemData }, null, 'item-1')
// key => '.my-component.item-1'
```

### Генерация ключа

Ключ (`key`) для Vue-компонента формируется **аддитивно** (последовательным добавлением). Он всегда начинается с точки и имени компонента (`.name`), к которому через точку добавляются следующие значения (если они существуют):

1.  **`.name`** — если `name` является строкой.
2.  **.index** — из третьего аргумента функции `render`.
3.  **.props.index** — если передан в объекте свойств и является строкой.
4.  **.className** — если класс указан в `props`.
5.  **.props.id** — если ID указан в `props`.

Это гарантирует уникальность ключа даже при совпадении имен компонентов.
