Frontend | Вопросы собесов on Telegram: “🤔 Расскажи про mobx MobX

🤔 Расскажи про mobx

MobX — это библиотека для управления состоянием в JavaScript-приложениях, особенно в React. Она основана на реактивности и позволяет автоматически отслеживать изменения данных, обновляя интерфейс только там, где это необходимо.

🚩Основные принципы MobX

🟠Модели данных – `observable` (наблюдаемые)
MobX делает объекты реактивными, автоматически отслеживая их изменения.

import { makeAutoObservable } from "mobx";

class Store {
  count = 0;

  constructor() {
    makeAutoObservable(this); // Автоматически делает свойства "наблюдаемыми"
  }

  increment() {
    this.count++;
  }
}

const store = new Store();

🟠Экшены (`actions`)
Это методы, которые изменяют состояние.

store.increment(); // Увеличит count и автоматически обновит UI

🟠Компоненты подписываются на изменения – `observer`
Чтобы React-компонент обновлялся при изменении данных, его нужно обернуть в observer (из mobx-react-lite).

import React from "react";
import { observer } from "mobx-react-lite";

const Counter = observer(({ store }) => (
  <div>
    <p>Счетчик: {store.count}</p>
    <button onClick={() => store.increment()}>+</button>
  </div>
));

export default Counter;

🟠Компьютед-свойства (`computed`)
Это вычисляемые значения, которые пересчитываются только при изменении зависимостей.

class Store {
  count = 2;

  constructor() {
    makeAutoObservable(this);
  }

  get double() {
    return this.count * 2;
  }
}

const store = new Store();
console.log(store.double); // 4
store.count = 5;
console.log(store.double); // 10 (пересчиталось автоматически)

Ставь 👍 и забирай 📚 Базу знаний