makeObservable і makeObservable

ReactMiddle~2 хв читання

Що робить `makeObservable()`

makeObservable(this, annotations) - робить властивості й методи екземпляра класу спостережуваними (observable), відповідно до вказаних анотацій.

Ти вручну вказуєш, які поля і методи стають:

observable - відстежуються на зміну,
computed - обчислюються на основі інших observable,
action - змінюють стан.

Приклад з `makeObservable`

javascript

import { makeObservable, observable, action, computed } from "mobx"

class Counter {
  count = 0

  constructor() {
    // вручну оголошуємо, що спостерігати
    makeObservable(this, {
      count: observable,
      increment: action,
      double: computed,
    })
  }

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

  increment() {
    this.count++
  }
}

const counter = new Counter()

Тепер:

count - відстежуване значення,
increment() - "дія" (action),
double - обчислювана властивість (computed).

Компоненти, обгорнуті в observer, будуть автоматично перерендерюватися, якщо count зміниться.

Ключові моменти:

makeObservable() - явний опис реактивних властивостей.
Потрібно вказувати анотації вручну.
Підходить, якщо тобі потрібне точне налаштування (наприклад, не всі поля observable).
Працює і зі спадкуванням (можна комбінувати анотації з різних класів).

Що робить `makeAutoObservable()`

makeAutoObservable(this) - автоматично робить усі властивості й методи класу реактивними, без явного переліку анотацій.

Тобто MobX сам визначає, що є:

observable (поля),
computed (геттери),
action (методи).

Приклад з `makeAutoObservable`

javascript

import { makeAutoObservable } from "mobx"

class Counter {
  count = 0

  constructor() {
    makeAutoObservable(this) // все робиться автоматично
  }

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

  increment() {
    this.count++
  }
}

const counter = new Counter()

Тут MobX сам:

зробив count → observable,
double → computed,
increment() → action.

Чому "auto"

MobX аналізує структуру класу:

поля → observable,
геттери → computed,
методи → action.

Тобі не потрібно нічого вказувати вручну. Це найзручніший спосіб створювати store для більшості сценаріїв.

Різниця між `makeObservable` і `makeAutoObservable`

Властивість	`makeObservable`	`makeAutoObservable`
Анотації	Вказуються вручну	Визначаються автоматично
Контроль	Повний (гнучкість)	Спрощений (зручність)
Підходить для	Складних і кастомних структур	Простих store і UI-state
Computed	Потрібно оголосити вручну	Визначається за геттерами
Actions	Вказуються вручну	Автоматично позначаються
Використовується частіше	У великих проєктах з контролем типів	У більшості випадків (UI / SPA)

Приклад різниці

javascript

class UserStore {
  name = "Alex"
  age = 25

  constructor() {
    // makeObservable вимагає явного опису
    makeObservable(this, {
      name: observable,
      age: observable,
      isAdult: computed,
      birthday: action,
    })
  }

  get isAdult() {
    return this.age >= 18
  }

  birthday() {
    this.age++
  }
}

Те саме з makeAutoObservable:

javascript

class UserStore {
  name = "Alex"
  age = 25

  constructor() {
    makeAutoObservable(this)
  }

  get isAdult() {
    return this.age >= 18
  }

  birthday() {
    this.age++
  }
}

Обидва варіанти працюють однаково, але другий - коротший, чистіший і простіший.

Коли використовувати який

Сценарій	Що вибрати
90% випадків - стандартні store	`makeAutoObservable`
Потрібно виключити поле зі спостереження	`makeObservable` (явний контроль)
Є поля, що не потребують реактивності (наприклад, `timeoutId`, `config`)	`makeObservable`
Складне спадкування store-класів	`makeObservable`
Швидко створити store для UI	`makeAutoObservable`

Можна комбінувати

Ти можеш використовувати makeAutoObservable, але все ж вказати, що не потрібно відстежувати:

javascript

class Store {
  id = Math.random()
  value = 0

  constructor() {
    makeAutoObservable(this, {
      id: false, // не відстежувати цю властивість
    })
  }

  increment() {
    this.value++
  }
}

ПІДСУМОК

makeObservable(this, annotations) - ручне налаштування реактивних властивостей. makeAutoObservable(this) - автоматична реактивність "із коробки".

Функція	Що робить
`makeObservable`	вручну оголошує observable, computed та action
`makeAutoObservable`	автоматично робить усе спостережуваним

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.