Экосистема React Aria построена на строгом разделении двух уровней логики интерфейса:
Такое разделение позволяет строить компоненты пользовательского интерфейса, в которых логика состояния полностью отделена от визуального представления и механизмов доступности.
React Stately — это библиотека управления состоянием компонентов интерфейса. Она предоставляет набор специализированных хуков, которые реализуют внутреннюю модель состояния для различных типов UI-компонентов.
В отличие от традиционных подходов, где состояние управляется вручную
через useState или useReducer, React Stately
предлагает готовые абстракции состояния,
соответствующие конкретным типам интерфейсных элементов.
Главная цель React Stately — централизованное управление состоянием сложных интерфейсных компонентов.
К таким компонентам относятся:
Каждый из этих элементов имеет сложную модель состояния. Например, список должен учитывать:
Реализация подобной логики вручную приводит к:
React Stately решает эту проблему, предоставляя унифицированные модели состояния, которые можно использовать во множестве компонентов.
Экосистема разделена на две независимые библиотеки.
| Библиотека | Назначение |
|---|---|
| React Aria | Поведение компонентов и ARIA-доступность |
| React Stately | Управление состоянием компонентов |
Пример архитектуры компонента:
UI компонент
↓
React Aria (поведение, accessibility)
↓
React Stately (state management)Иными словами:
Отделение управления состоянием имеет несколько важных преимуществ.
Модель состояния можно применять в разных UI-реализациях.
Например:
useListStateReact Stately не содержит никакой разметки.
В библиотеке отсутствуют:
Она работает исключительно с данными и состоянием.
Компоненты интерфейса часто имеют десятки состояний:
React Stately предоставляет готовые решения для управления этими состояниями.
React Stately реализует модели состояния для нескольких типов интерфейсных структур.
Коллекции представляют набор элементов.
Примеры:
В таких структурах необходимо управлять:
Многие интерфейсы позволяют выбирать элементы.
Возможные режимы:
React Stately реализует универсальную систему selection.
Для сложных компонентов требуется:
Эта логика также входит в модель состояния.
Некоторые компоненты имеют состояние открытия:
React Stately управляет:
Библиотека предоставляет специализированные хуки для различных типов компонентов.
Управляет состоянием списков.
Функции:
Пример:
import {useListState} from "@react-stately/list";
let state = useListState({
selectionMode: "multiple",
items: [
{id: 1, name: "Apple"},
{id: 2, name: "Orange"},
{id: 3, name: "Banana"}
]
});Используется для древовидных структур.
Поддерживает:
Реализует модель состояния таблиц.
Функциональность:
Управляет состоянием комбобокса.
Включает:
Используется для меню.
Контролирует:
Применяется для выпадающих списков.
Позволяет:
React Stately построена на нескольких фундаментальных принципах.
Все состояния описываются декларативно.
Пример:
useListState({
selectionMode: "multiple"
})Не требуется вручную писать:
Все хуки React Stately имеют схожую структуру:
use<Component>State(options)Примеры:
useListState
useMenuState
useComboBoxState
useTableStateЭто упрощает изучение библиотеки.
React Stately поддерживает два режима управления.
Состояние хранится внутри хука.
defaultSelectedKeyСостояние управляется извне.
selectedKey
onSelectionChangeПример:
let [value, setValue] = useState(null);
let state = useSelectState({
selectedKey: value,
onSelectionChange: setValue
});Многие компоненты интерфейса работают с коллекциями элементов.
React Stately использует специальную абстракцию:
CollectionКоллекция содержит:
Каждый элемент имеет структуру:
NodeСвойства узла:
key
type
value
parentKey
childNodesЭта структура позволяет единообразно работать:
React Stately реализует гибкую систему выбора.
Поддерживаются режимы:
none
single
multipleПример:
useListState({
selectionMode: "single"
})Выбранные элементы хранятся в структуре:
Set<Key>Это позволяет:
Каждый элемент коллекции имеет уникальный ключ.
Пример:
key="item-1"или
key={user.id}Ключи используются для:
React Stately не реализует пользовательское поведение.
Она только хранит и изменяет состояние.
React Aria использует это состояние для:
Пример взаимодействия:
React Aria → события пользователя
React Stately → обновление состояния
UI компонент → отображение нового состоянияКомпонент Select строится из нескольких слоев.
useSelectState()Хранит:
useSelect()Добавляет:
Разметка:
button
listbox
optionsПри разработке сложных компонентов возникают проблемы:
React Stately решает их за счет:
Библиотека применяется при разработке:
Особенно полезна для:
useState подходит для простых компонентов.
Например:
isOpen
value
countНо для сложных интерфейсов требуется:
React Stately предоставляет готовые абстракции, которые значительно упрощают реализацию таких компонентов.
React Stately является частью большой экосистемы React Spectrum.
Структура:
React Spectrum
├── React Aria
├── React Stately
└── React Spectrum ComponentsНазначение уровней:
| Уровень | Функция |
|---|---|
| React Stately | состояние |
| React Aria | поведение |
| React Spectrum | готовые компоненты |
Такое разделение делает архитектуру гибкой и масштабируемой.
React Stately — это библиотека управления состоянием для сложных компонентов интерфейса.
Она обеспечивает:
Благодаря этому React Stately становится фундаментом для построения доступных, масштабируемых и сложных пользовательских интерфейсов на React.