MobX туралы айтыңыз.

MobX — бұл қолданба күйін басқару үшін кітапхана. MobX негізінде үш тұжырымдама жатыр:

• Күй (State): қолданбаның күйін құрайтын деректер. observable (бақыланатын) ретінде жарияланады.

  // observable күй
  импорт { observable } одан "mobx";
  
  const appState = observable({
      count: 0
  });
  

• Туынды деректер (Derivations): күй негізінде есептелетін деректер. Күй өзгерген кезде автоматты түрде жаңартылады. computed (есептелетін) ретінде жарияланады.

  // есептелетін туынды
  импорт { observable, computed } одан "mobx";
  
  const appState = observable({
      count: 0
  });
  
  const squaredCount = computed(() => appState.count * appState.count);
  

• Әрекеттер (Actions): күйді өзгертетін функциялар. Күйді айқын мутировать ету үшін ұсынылады. action ретінде жарияланады.

  // күйді өзгерту әрекеті
  импорт { observable, action } одан "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) пайдалана отырып.

// Негізгі React + MobX интеграциясы
импорт React одан "react";
импорт { useObserver } одан "mobx-react-lite";
импорт { observable, action } одан "mobx";

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

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

функция Counter() {
    қайтару useObserver(() => (
        <div>
            Count: {appState.count}
            <батырма onClick={increment}>Өсірту</батырма>
        </div>
    ));
}

MobX кез келген көлемдегі қолданбаларға жарамды, шағын виджеттерден бастап ірі масштабты кәсіпорын шешімдеріне дейін.