mobx: Eine einfache und skalierbare staatliche Verwaltungslösung für React

mobx ist eine beliebte staatliche Verwaltungsbibliothek für JavaScript -Anwendungen, insbesondere in React. Im Gegensatz zu Redux, das sich auf einen zentralen Geschäft und ein explizites Versand der Aktion stützt, verfolgt MOBX einen reaktiveren Ansatz, um den Zustand zu verwalten. Es aktualisiert automatisch den Status und die Benutzeroberfläche Ihrer Anwendung, indem sie Abhängigkeiten verfolgen und nur die erforderlichen Teile der Anwendung erneut abbauen, wenn sich der Status ändert.

In diesem Leitfaden werden wir die Schlüsselkonzepte von MOBX durchgehen, wie man sie mit React einrichten und wie man sie effektiv für das staatliche Management in Ihren React -Anwendungen verwendet.

---

1. Was ist MOBX?

mobx ist eine staatliche Verwaltungsbibliothek, die reaktives Programmier nutzt, um den Status Ihrer Bewerbung zu verwalten. Es verfolgt und aktualisiert automatisch die Teile Ihrer Benutzeroberfläche, die vom Status abhängen, und macht es zu einer sehr effizienten und intuitiven Möglichkeit, Anwendungsdaten zu verwalten.

Schlüsselmerkmale von MOBX:

• Automatische Abhängigkeits -Tracking : MOBX verfolgt automatisch, welche Teile Ihrer Anwendung davon abhängen, welche Zustandsstücke.
• Einfach und intuitiv : Mit MOBX müssen Sie keine Aktionen manuell versenden oder den Status aktualisieren. MOBX reagiert auf automatische Änderungen an.
• deklarativ : MOBX verwendet einen beobachtbaren Ansatz, bei dem Sie Ihren Zustand als beobachtbar und Ihre Komponenten automatisch neu rendern, wenn sich der Zustand ändert.
• optimiert für Performance.

---

2. Kernkonzepte von MOBX

mobx basiert auf einigen Kernkonzepten, die zusammenarbeiten, um den Status zu verwalten:

1. Beobachtbarer Zustand

Beobachtbarer Zustand ist der Kern von MOBX. Wenn ein Objekt als

beobachtbar

gekennzeichnet ist, verfolgt MOBX den Status dieses Objekts und aktualisiert automatisch Komponenten, die davon abhängen.

Beispiel:

import {beobachtbar} aus 'mobx'; const counter = beobachtbar ({{{ Wert: 0, Increment () { Dieser Wert; }, Decrement () { this.Value--; }, });

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

Der beobachtbare Dekorateur macht das Counter -Objekt reaktiv. Wenn sich der Wert ändert, wird jede React-Komponente, die diesen Status verwendet, automatisch erneut render.

2. Aktionen

Aktionen in MOBX sind Funktionen, die den Status ändern. Nach Übereinkommen sollten Maßnahmen verwendet werden, um den beobachtbaren Zustand zu aktualisieren, da MOBX sicherstellt, dass der Staat kontrolliert und vorhersehbar aktualisiert wird.

Beispiel:

import {action} aus 'mobx'; const counter = beobachtbar ({{{ Wert: 0, Inkrement: Aktion (Funktion () { Dieser Wert; }), Abnahme: Aktion (Funktion () { this.Value--; }), });

import { action } from 'mobx';

const counter = observable({
  value: 0,
  increment: action(function () {
    this.value  ;
  }),
  decrement: action(function () {
    this.value--;
  }),
});

3. Berechnete Werte

berechnete Werte werden aus dem beobachtbaren Zustand abgeleitet. Wenn sich der beobachtbare Zustand ändert, werden berechnete Werte automatisch neu berechnet, um sicherzustellen, dass der Status der Anwendung konsistent bleibt.

Beispiel:

import {berechnet} aus 'mobx'; const counter = beobachtbar ({{{ Wert: 0, Increment () { Dieser Wert; }, Decrement () { this.Value--; }, Holen Sie sich DoubleValue () { zurück diesen. value * 2; }, });

import { computed } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
  get doubleValue() {
    return this.value * 2;
  },
});

4. Reaktionen

Reaktionen sind Nebenwirkungen, die ausgeführt werden, wenn sich ein beobachtbarer Wert ändert. Reaktionen sind nützlich, um Aktionen basierend auf Zustandsänderungen auszulösen.

Beispiel:

import {autorun} aus 'mobx'; const counter = beobachtbar ({{{ Wert: 0, Increment () { Dieser Wert; }, Decrement () { this.Value--; }, }); autorun (() => { console.log (`counterwert ist: $ {counter.Value}`); });

import { autorun } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

autorun(() => {
  console.log(`Counter value is: ${counter.value}`);
});

3. Integrieren von MOBX in React

---

mobx integriert nahtlos in React, um den Status Ihrer App zu verwalten. In React arbeitet MOBX mit der Observer

Komponente höherer Bestellung, um Statusänderungen zu verfolgen und die Benutzeroberfläche bei Bedarf automatisch zu aktualisieren.

Schritt 1: Installieren Sie MOBX und React-MOBX

Um MOBX in einer Reaktionsanwendung zu verwenden, müssen Sie MOBX und MOBX-React installieren:

npm installieren Sie MOBX MOBX-React

npm install mobx mobx-react

Erstellen Sie einen Laden, in dem der Status Ihrer Bewerbung stattfindet. Dieser Speicher ist beobachtet, und Komponenten können auf seine Änderungen reagieren.

Beispiel:

import {beobachtbar, action} aus 'mobx'; Klasse Gegenstore { @observable value = 0; @Action Increment () { Dieser Wert; } @action detrement () { this.Value--; } } Export const counterstore = new cubstore ();

import { observable, action } from 'mobx';

class CounterStore {
  @observable value = 0;

  @action increment() {
    this.value  ;
  }

  @action decrement() {
    this.value--;
  }
}

export const counterStore = new CounterStore();

Schritt 3: Machen Sie React -Komponenten Observer

Um Ihre React-Komponenten mit MOBX zu verbinden, müssen Sie die Komponente der Beobachter höherer Ordnung von MOBX-React verwenden. Auf diese Weise können Ihre Komponenten automatisch erneut rendern, wenn sich der beobachtbare Zustand ändert.

Beispiel:

reagieren von 'react'; Import {Observer} aus 'MOBX-React'; import {conterstore} aus './counterstore'; const counter = observer (() => { zurückkehren (

count: {counterstore.Value}

counterstore.increment ()}> inkrement counterstore.decrement ()}> decrement

); }); Standardschalter exportieren;

import React from 'react';
import { observer } from 'mobx-react';
import { counterStore } from './CounterStore';

const Counter = observer(() => {
  return (
    

      
Count: {counterStore.value}
       counterStore.increment()}>Increment
       counterStore.decrement()}>Decrement
    
  );
});

export default Counter;

• Schritt 4: Verwenden Sie den Laden in Ihrer Anwendung

Jetzt, da Ihr Geschäft eingerichtet ist und Ihre Komponenten beobachtet werden, können Sie den Laden in Ihrer Bewerbung verwenden:

reagieren von 'react'; import {render} aus 'react-dom'; Import {Provider} aus 'MOBX-React'; Zähler von './counter' importieren; import {conterstore} aus './counterstore'; const app = () => ( ); render (, document.getElementById ('root'));

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
import Counter from './Counter';
import { counterStore } from './CounterStore';

const App = () => (
  
    
  
);

render(, document.getElementById('root'));

wird verwendet, um den Laden in die Anwendung zu injizieren. Die Zählerkomponente kann jetzt direkt auf die Gegenstore zugreifen.

4. Vorteile der Verwendung von mobx

---

1. Einfachheit

mobx erleichtert es einfach, Status zu verwalten und die Kesselplatte und Komplexität zu reduzieren, die häufig in anderen staatlichen Verwaltungsbibliotheken wie Redux zu finden sind.

2. Automatische Wiederholung

Wenn sich der Staat ändert, wird MOBX automatisch die Wiederholung der Komponenten behandelt, die von diesem Zustand abhängen.

3. Feinkörnige Beobachtbarkeit

MOBX stellt sicher, dass nur die erforderlichen Komponenten erneut gerendert werden, wenn sich der Zustand ändert, was die Leistung verbessert.

4. Deklarative Staatsmanagement

Mit MOBX wird der Staat deklarativ verwaltet. Sie müssen nur definieren, wie sich der Staat verhalten sollte, und Mobx umgeht den Rest.

5. Abschluss

---

mobx ist eine leistungsstarke und effiziente staatliche Verwaltungsbibliothek, die reaktive Programmierprinzipien verwendet. Mit seiner einfachen Setup und der automatischen Zustandsverfolgung erleichtert das Verwalten von Status in React -Anwendungen erheblich. MOBX ist besonders vorteilhaft für Anwendungen, die eine feinkörnige Kontrolle über Aktualisierungen und Leistungsoptimierung erfordern. Wenn Sie eine komplexe Reaktionsanwendung erstellen und eine leicht verständliche staatliche Verwaltungslösung wünschen, ist MOBX eine ausgezeichnete Wahl. Es ist intuitiv, mächtig und arbeitet nahtlos mit React, um eine optimierte Entwicklungserfahrung zu liefern.