Расскажи о MobX.

Sobes Copilot

Получайте ответы в реальном времени

Ответ от нейросети

sobes.tech AI

MobX — это библиотека для управления состоянием приложения. В основе MobX лежат три концепции:

Состояние (State): данные, которые составляют состояние приложения. Объявляется как observable (наблюдаемое).
```
// observable state
import { observable } from "mobx";

const appState = observable({
    count: 0
});
```
Производные данные (Derivations): данные, которые вычисляются на основе состояния. Автоматически обновляются при изменении состояния. Объявляются как computed (вычисляемые).
```
// computed derivation
import { observable, computed } from "mobx";

const appState = observable({
    count: 0
});

const squaredCount = computed(() => appState.count * appState.count);
```
Действия (Actions): функции, которые изменяют состояние. Рекомендуется использовать для явного мутирования состояния. Объявляются как action.
```
// action to modify state
import { observable, action } from "mobx";

const appState = observable({
    count: 0
});

const increment = action(() => {
    appState.count++;
});
```

MobX использует реактивную парадигму, автоматически отслеживая зависимости. При изменении наблюдаемого состояния, все зависящие производные данные и реакции (такие как рендеринг UI) автоматически обновляются.

Преимущества MobX:

Простота: Минималистичный API, легко начать использовать.
Производительность: Автоматическое отслеживание зависимостей минимизирует лишние перерисовки и вычисления.
Гибкость: Хорошо интегрируется с различными UI-фреймворками (React, Vue, Angular).

Основные декораторы/утилиты в MobX:

Название	Назначение
`observable`	Определяет наблюдаемое состояние.
`computed`	Определяет вычисляемые производные данные.
`action`	Определяет действие, которое мутирует состояние.
`autorun`	Создает реакцию, автоматически выполняющуюся при изменении наблюдаемых данных внутри нее.
`reaction`	Создает реакцию с явным определением зависимостей и эффекта.
`when`	Создает реакцию, которая выполняется один раз при выполнении определенного условия.

Интеграция с React обычно происходит с помощью пакета mobx-react или mobx-react-lite, используя хуки (useObserver, useLocalStore) или компоненты-обертки (observer).

// Basic React + MobX integration
import React from "react";
import { useObserver } from "mobx-react-lite";
import { observable, action } from "mobx";

const appState = observable({
    count: 0
});

const increment = action(() => {
    appState.count++;
});

function Counter() {
    return useObserver(() => (
        <div>
            Count: {appState.count}
            <button onClick={increment}>Increment</button>
        </div>
    ));
}

MobX подходит для приложений любого размера, от небольших виджетов до крупномасштабных энтерпрайз-решений.